How can I show multiple countdown timers at once?

Question

I'm trying to show a simple 24 hour countdown timer that resets once expired. I noticed it will only show one element with the time.I'm using duplicate ID's for the example but the timer doesn't work at all with classes. If you can spot where I'm going wrong or suggest another efficient script that would be great.

function makeMeTwoDigits(n) {
  return (n < 10 ? "0" : "") + n;
}
// Set the date we're counting down to
var countDownDate = new Date(2022, 4, 30, 24, 00, 0, 0).getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Output the result in an element with id="time"
  document.getElementById("time").innerHTML = makeMeTwoDigits(hours) + ":" +
    makeMeTwoDigits(minutes) + ":" + makeMeTwoDigits(seconds) + "";

  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("time").innerHTML = "soon";
  }
}, 1000);

<span id="time" style="font-size: 28px;"></span>
<span id="time" style="font-size: 28px;"></span>

https://jsfiddle.net/ot6b4ex0/1/

Answer 1

You can use a class with querySelectorAll, and loop on the result:

function makeMeTwoDigits(n) {
  return (n < 10 ? "0" : "") + n;
}
// Set the date we're counting down to
var countDownDate = new Date(2022, 4, 30, 24, 00, 0, 0).getTime();

// Select all .time
var timeSpans = document.querySelectorAll(".time")

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Output the result in all elements with class="time"
  timeSpans.forEach(span => {
    span.innerHTML = makeMeTwoDigits(hours) + ":" +
      makeMeTwoDigits(minutes) + ":" + makeMeTwoDigits(seconds) + "";
  })

  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    timeSpans.forEach(span => { span.innerHTML = "soon"; })
  }
}, 1000);

<span class="time" style="font-size: 28px;"></span>
<span class="time" style="font-size: 28px;"></span>

Answer 2

change the id of the second one and copy what you did for one and do for the other

function makeMeTwoDigits(n) {
  return (n < 10 ? "0" : "") + n;
}
// Set the date we're counting down to
var countDownDate = new Date(2022, 4, 30, 24, 00, 0, 0).getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Output the result in an element with id="time"
  document.getElementById("time").innerHTML = makeMeTwoDigits(hours) + ":" +
    makeMeTwoDigits(minutes) + ":" + makeMeTwoDigits(seconds) + "";
    
     document.getElementById("time2").innerHTML = makeMeTwoDigits(hours) + ":" +
    makeMeTwoDigits(minutes) + ":" + makeMeTwoDigits(seconds) + "";


  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("time").innerHTML = "soon";
    document.getElementById("time2").innerHTML = "soon";
  }
}, 1000);

<span id="time" style="font-size: 28px;"></span>
<span id="time2" style="font-size: 28px;"></span>