Countdown timer with dynamic date and title

Question

I found a count down timer that has a series of events coming up, and can automatically update to show the next event

What I would like to do is add a string to this so I can update the title of the event as well as the timer

for example

Race title "countdown timer"

I thought of two ways i could go about this but lacking the knowledge of how to implement

1. Add the string onto the array and somehow call it depending on which part of the array its showing

2. Make a switch statement that holds the different titles and call it based off of the array number its using

If anyone could help it would be much appreciated

Javascript and HTML:

      const schedule = [
      ['Feb 25 2021', 'Feb 9 2021', "race 1"],
      ['Feb 9 2021', 'Apr 20 2021', "race 2"],
      ['Apr 20 2022', 'Jul 25 2023', "race 3"]
      ];


      function getTimeRemaining(endtime) {
      const total = Date.parse(endtime) - Date.parse(new Date());
      const seconds = Math.floor((total / 1000) % 60);
      const minutes = Math.floor((total / 1000 / 60) % 60);
      const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
      const days = Math.floor(total / (1000 * 60 * 60 * 24));

      return {
      total,
      days,
      hours,
      minutes,
      seconds
      };
      }

      function initializeClock(id, endtime) {
      const clock = document.getElementById(id);
      const daysSpan = clock.querySelector('.days');
      const hoursSpan = clock.querySelector('.hours');
      const minutesSpan = clock.querySelector('.minutes');
      const secondsSpan = clock.querySelector('.seconds');

      function updateClock() {
      const t = getTimeRemaining(endtime);

      daysSpan.innerHTML = t.days;
      hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
      minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
      secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

      if (t.total <= 0) {
        clearInterval(timeinterval);
      }
      }

      updateClock();
      const timeinterval = setInterval(updateClock, 1000);
      }

      // iterate over each element in the schedule
      for (var i=0; i<schedule.length; i++) {
      var startDate = schedule[i][0];
      var endDate = schedule[i][1];

      // put dates in milliseconds for easy comparisons
      var startMs = Date.parse(startDate);
      var endMs = Date.parse(endDate);
      var currentMs = Date.parse(new Date());

      // if current date is between start and end dates, display clock
      if (endMs > currentMs && currentMs >= startMs ) {
      initializeClock('clockdiv', endDate);

      }
      }

      schedule.forEach(([startDate, endDate]) => {
      // put dates in milliseconds for easy comparisons
      const startMs = Date.parse(startDate);
      const endMs = Date.parse(endDate);
      const currentMs = Date.parse(new Date());

      // if current date is between start and end dates, display clock
      if (endMs > currentMs && currentMs >= startMs ) {
      initializeClock('clockdiv', endDate);
      }
      });

      var race = i;

      switch (race) {
      case 1:
      race = "race 1"
      break;
      case 2:
        race = "race 2"
      break;
      case 3:
        race = "race 3"
      break;
      default:
        race = "end of season"
      }

      document.querySelector('.nextRace').innerHTML = race;

<div>
  Next Race<br>
  <span class="nextRace"></span>
</div>

<div id="clockdiv">

  <span class="race title"></span> Days: <span class="days"></span><br> Hours: <span class="hours"></span><br> Minutes: <span class="minutes"></span><br> Seconds: <span class="seconds"></span>
</div>

Answer 1

After some time and coming back to this with a fresh brain i have worked it out

all i needed to do was place the switch statement in the section of the statement that loops the varible i. So that the variable picks up on the correct loop and not the number of date arrays

  // iterate over each element in the schedule
    for (var i = 0; i < schedule.length; i++) {
      var startDate = schedule[i][0];
      var endDate = schedule[i][1];

      // put dates in milliseconds for easy comparisons
      var startMs = Date.parse(startDate);
      var endMs = Date.parse(endDate);
      var currentMs = Date.parse(new Date());

      // if current date is between start and end dates, display clock
      if (endMs > currentMs && currentMs >= startMs) {
        initializeClock('clockdiv', endDate);

        var race = i;

        switch (race) {
          case 0:
            track = "race 1"
            break;
          case 1:
            track = "race 2"
            break;
          case 2:
            track = "race 3"
            break;
          
          default:
            track = "end of season"
        }

      }

    }