Recuerda que el ID debe ser único en todo el documento, no se puede repetir.
Al clonar el contenedor con cloneNode(true), también estás clonando el <h4>, lo que produce que haya varios elementos con el mismo ID
enc. Para evitar esto, lo más sencillo, es referenciar el elemento <h4> con
nuevo.firstElementChild
, sin necesidad de utilizar identificadores. Pero recuerda que el h4 debe ser el primer elemento del contenedor para que este método funcione.
Código HTML:
Ver original<input type="number" id="num"> <h3 id="error" style="display:none;">Por favor escribe un valor valido
</h3> <div id="cont" style="display:none;">
Código Javascript
:
Ver originalfunction recibir() {
var valor = document.getElementById("num").value;
var container = document.getElementById("cont");
var nulo = document.getElementById("error");
document.getElementById("canciones").innerHTML = ""; // reseteamos lista de canciones
// Clonar dentro del ciclo
if(valor <= 0) {
nulo.style.display = "block"; // mostrar error
} else {
nulo.style.display = "none"; // ocultar error
for(i = 1; i <= valor; i++) {
let nuevo = container.cloneNode(true);
nuevo.firstElementChild.innerHTML = "Song #" + i;
nuevo.id = 'div-nuevo-' + i;
nuevo.style.display = "block";
nuevo.style.border = "5px solid lightblue";
nuevo.style.width = "20%";
nuevo.style.marginTop = "20px";
// Agrega el nuevo div al padre del contenedor
document.getElementById("canciones").appendChild(nuevo); // añadimos cancion a la lista
}
}
}
Adjunto una
DEMO funcionando.