How to change class and recall the class back using javascript

Iam trying to give 2 different colors on my timer countdown apps..

on workout timer will be green.

on rest timer will be red. (and the color will be red until end)

my question is how to make the timer back to green after rest timer(red) and back to red after green(workout timer)

document.getElementById('start').addEventListener('click', startCountdown);

    function startCountdown() {
      let counter = 3,
        mode = "Workout",
        rounds = 1;
      const interval = setInterval(function() {
        counter--;

        if (mode == "Workout" && counter >= 0) {
          id = document.getElementById("count");
          id.innerHTML = "ROUND " + rounds + " <br> " + counter;
          id.classList.add('green') <<<THE FRIST COLOR RUNNING WELL
        } else {
          id = document.getElementById("count");
          id.innerHTML = "REST " + " <br> " + counter;
          id.classList.add('red') <<< SECOND COLOR RUNNING WELL
        }

        if (counter === 0) {
          if (mode == "Workout") {
            mode = "Rest";
          } else {
            mode = "Workout";
            rounds++;
          }
          id.innerHTML = "DONE";
          counter = 3;
          if (rounds == 21) {
            clearInterval(interval);
          }
        }

      }, 1000);

>Solution :

add this near line 9
(mode == "Workout" && counter >= 0) ? clsnm="green" : clsnm="red";
and pass this variable near id.classList.add(clsnm)

alternatively you can also try to add id.classList.remove(‘class_name’) before id.classList.add(‘class_name’)