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`;
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>