Tengo una matriz que contiene 10 matrices y coloco una matriz en cada uno de sus contenedores, creando un h3 que contiene el contenido de esa matriz. pero lo que sucede es que todas las matrices van en todos sus contenedores. Puedes ver el ejemplo a continuación.

 .list-container { width: 300px; background: royalblue; padding: 1em; margin: 2rem; } h3 { display: inline-block; font-size: .75rem; color: white; padding: .75em; background: red; margin: .75rem; } /* this is exempla style */ .example { width: 300px; background: royalblue; padding: 1em; margin: 2rem; }

 <div class="list-container"> </div> <div class="list-container"> </div> <!-- this are the examples --> <h2>below is the correct example</h2> <div class="example"> <h3>Frontend</h3> <h3>Senior</h3> <h3>HTML</h3> <h3>CSS</h3> <h3>JavaScript</h3> </div> <div class="example"> <h3>Fullstack</h3> <h3>Midweight</h3> <h3>Python</h3> <h3>React</h3> </div>

 const arrList = [ ["Frontend", "Senior", "HTML", "CSS", "JavaScript"], ["Fullstack", "Midweight", "Python", "React"] ]; const listContainer = document.querySelectorAll('.list-container'); listContainer.forEach(container => { arrList.forEach(list => { const h3 = document.createElement('h3'); h3.innerHTML = list; container.append(h3); }); });