Soy bastante nuevo en JavaScript y estoy jugando con él para comprenderlo mejor.

Tengo este problema en el que quiero agregar uno o dos tramos con la identificación de "divisor", pero de alguna manera mi método forEach solo agrega el ícono en el último elemento divisor.

¿Por qué es eso 🤔?

Aquí está el marcado HTML:

 <div class="container "> <div class="row d-flex justify-content-center align-items-center min-vh-100"> <div class="col left d-flex justify-content-center align-items-center">HI 👋</div> <div class="col right d-flex justify-content-center align-items-center flex-column"> <span id="hours"></span> <span id="divider"></span> <span id="minutes"></span> <span id="divider"></span> <span id="seconds"></span> </div> </div> </div>

Aquí está el JS:

 const showHours = document.getElementById('hours'); const showMinutes = document.getElementById('minutes'); const showSeconds = document.getElementById('seconds'); let dividers = document.querySelectorAll('#divider'); let icon = document.createElement('i'); icon.className = "fas fa-arrow-down"; setInterval(showTime, 1000); function showTime() { let time = new Date(); let h = time.getHours(); let m = time.getMinutes(); let s = time.getSeconds(); h = h < 10 ? "0" + h : h; m = m < 10 ? "0" + m : m; s = s < 10 ? "0" + s : s; showHours.innerHTML = h + ":"; showMinutes.innerHTML = m + ":"; showSeconds.innerHTML = s; } dividers.forEach(divider => { divider.append(icon); })

Enlace al proyecto: https://codepen.io/andreasbruhn/project/editor/AYMmrP

Espero que alguien pueda ayudarme a entender, y perdón por esta pregunta de novato, pero parece que simplemente no puedo entender esto...