I'm fairly new to JavaScript and are playing around with it to get a better understanding of it.

I have this problem where I want to append a to two span with the id of "divider" but somehow my forEach method only appends the icon on the last divider element.

Why is that 🤔?

Here is the HTML markup:

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

Here is the 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);
})

Link to project: https://codepen.io/andreasbruhn/project/editor/AYMmrP

Hope someone can help me understand, and sorry for this rookie question but i simply can't seem to wrap my head around this...