div внутри другого div с l oop, используя javascript

Question

Я пытаюсь создать 5 делений внутри еще 5 делений, используя l oop в javascript. Я сделал основные div, но все маленькие div создаются только в одном основном div, и создаются только три маленьких div. Как сделать один маленький div для одного основного div? То же самое должно повториться 5 раз.

for(let n=0; n<5; n++){
  var elm = document.createElement('div');
  elm.id="comments";
  document.getElementById('elm').appendChild(elm);

  var sec = document.createElement('div');
  sec.id = "sec";
  document.getElementById('comments').appendChild(sec);
}

#elm{
  width: 90vw;
  height: 90vh;
  background: blue;
 }
#comments{
  background: brown;
  width: 100%;
  height: 150px;
  border: 2px solid yellow;
 }
#sec{
  width: 50px;
  height: 50px;
  background: chartreuse;
  z-index: 1000;
  border: 2px solid darkgreen;
 }

<div id="elm"></div>

Answer 1

Атрибут id должен быть уникальным в документе, вместо этого используйте class. Кроме того, вы должны добавлять элемент se c внутри созданного в данный момент элемента comments в каждой итерации:

for(let n=0; n<5; n++){
  var elm = document.createElement('div');
  elm.setAttribute('class',"comments");
  document.getElementById('elm').appendChild(elm);

  var sec = document.createElement('div');
  sec.setAttribute('class', "sec");
  elm.appendChild(sec); // append the sec element inside the current comments element
}

#elm{
  width: 90vw;
  height: 90vh;
  background: blue;
}
.comments{
  background: brown;
  width: 100%;
  height: 150px;
  border: 2px solid yellow;
}
.sec{
  width: 50px;
  height: 50px;
  background: chartreuse;
  z-index: 1000;
  border: 2px solid darkgreen;
}

<div id="elm"></div>