Countdown timer - using several times in a page

Question

I'm trying to use this countdown in a wordpress page:

https://codepen.io/varzin/pen/rFfhH

It works on, but I need to use it several times in the same page.

document.getElementById("timer")

I tried to change to document.getElementsbyClassName("timer") but it didn't work.

Am I missing something?

function updateTimer() {
  future = Date.parse("June 11, 2021 11:30:00");
  now = new Date();
  diff = future - now;

  days = Math.floor(diff / (1000 * 60 * 60 * 24));
  hours = Math.floor(diff / (1000 * 60 * 60));
  mins = Math.floor(diff / (1000 * 60));
  secs = Math.floor(diff / 1000);

  d = days;
  h = hours - days * 24;
  m = mins - hours * 60;
  s = secs - mins * 60;

  document.getElementById("timer")
    .innerHTML =
    '<div>' + d + '<span>days</span></div>' +
    '<div>' + h + '<span>hours</span></div>' +
    '<div>' + m + '<span>minutes</span></div>' +
    '<div>' + s + '<span>seconds</span></div>';
}
setInterval('updateTimer()', 1000);

body {
  text-align: center;
  padding: 70px 50px;
  background: #0D1A29;
  font-family: "Helvetica Neue", "Open Sans", helvetica, arial, sans-serif;
}

#timer {
  font-size: 3em;
  font-weight: 100;
  color: white;
  text-shadow: 0 0 20px #48C8FF;
  div {
    display: inline-block;
    min-width: 90px;
    span {
      color: #B1CDF1;
      display: block;
      font-size: .35em;
      font-weight: 400;
    }
  }
}

<div id="timer"></div>

Answer 1

You need use Array of elements, and foreach element change text. But better create Class or function for specify future

Your demo with array of timers: https://codepen.io/Nekiy2/pen/NWNRgPz

function updateTimer() {
  future = Date.parse("June 11, 2020 11:30:00");
  now = new Date();
  diff = future - now;

  days = Math.floor(diff / (1000 * 60 * 60 * 24));
  hours = Math.floor(diff / (1000 * 60 * 60));
  mins = Math.floor(diff / (1000 * 60));
  secs = Math.floor(diff / 1000);

  d = days;
  h = hours - days * 24;
  m = mins - hours * 60;
  s = secs - mins * 60;

  let timers = document.querySelectorAll('.timer')
  timers.forEach((e) => { // array of timers

    e.innerHTML =
      '<div>' + d + '<span>days</span></div>' +
      '<div>' + h + '<span>hours</span></div>' +
      '<div>' + m + '<span>minutes</span></div>' +
      '<div>' + s + '<span>seconds</span></div>';
  })
}
setInterval('updateTimer()', 1000);

body {
  text-align: center;
  padding: 70px 50px;
  background: #0D1A29;
  font-family: "Helvetica Neue", "Open Sans", helvetica, arial, sans-serif;
}

.timer {
  font-size: 3em;
  font-weight: 100;
  color: white;
  text-shadow: 0 0 20px #48C8FF;
  div {
    display: inline-block;
    min-width: 90px;
    span {
      color: #B1CDF1;
      display: block;
      font-size: .35em;
      font-weight: 400;
    }
  }
}

<div class="countdown timer"></div>
<div class="countdown timer"></div>