How to use the same JS code (text with a checkbox with some css) to create hundreds of the same elem-CodePudding

I need hundreds of the same elements with different ID's so they can trigger different songs, without actually changing their ID manually. here for the HTML, JS and CSS:https://jsfiddle.net/Tylanmon/by5Lcvw0/4/ And here's just JS:

var Song_Name = document.createTextNode('La Marseillaise')

var div = document.createElement('div')
div.setAttribute('class', 'div')
var checkbox = document.createElement('input')
checkbox.type = 'checkbox'
checkbox.name = 'checkNAME'
checkbox.id = 'checkID'

var label = document.createElement('label')
label.id = 'nameID'
label.htmlFor = 'checkID'
label.appendChild(Song_Name)

div.appendChild(label)
div.appendChild(checkbox)

document.getElementById('songs').appendChild(div)
//  
var length = label.offsetWidth  
var length2 = checkbox.offsetWidth
console.log(length);

div.style.width = `${length   (length2 * 2 - 5.9)}px`;
div.style.backgroundColor = 'whitte'
div.style.borderRadius = '4px'
div.style.border = `1px solid black`;

CodePudding user response：

keeping in mind you are new in js so i just showed the html creation with js part only. if you know how loop works you can use it easily with it

for creating same markup multiple times you can do as below

const mainDiv = document.querySelector("#songs")

function newTextWithCheckBox(songName,id){
        let div = document.createElement("div")
    div.className = "each-song"
    div.id = "song-"   id
    div.innerHTML = 
    `${songName}
     <input type="checkbox" />`
    return div
}

// now create as many as you wanted
mainDiv.append(newTextWithCheckBox("La Marseillaise",1))
mainDiv.append(newTextWithCheckBox("La Marseillaise",2))
mainDiv.append(newTextWithCheckBox("La Marseillaise",3))
mainDiv.append(newTextWithCheckBox("La Marseillaise",4))

@font-face {
    font-family: Feather;
    src: url(/Font/feather.ttf);
}

.div {
-webkit-user-select: none; 
-moz-user-select: none;
-ms-user-select: none; 
user-select: none; 

Background-color: rgb(255, 221, 221);

font-size: x-large;


}

label {
    color: rgb(0, 0, 0); 
    
    font-family: 'Feather';
}

.each-song {
    background:pink;
    padding:15px;
    border : 1px solid black;
    width:max-content;
}

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="LanguageName_French.css">
</head>
<body>
    <div id="songs">

    </div>
    <script src="LanguageName_French.js"></script>
</body>
</html>