Removing 1st color, toggling 2 others

[javascriptcoding5678]

Blue play svg gets removed, replaced by Green & Orange.

Where then Green & Orange toggle back and forth.

To do that, is this how the code would be written?

or, should it be written differently?

Also, would you change visited to a different name?

Should it be called something else?

https://jsfiddle.net/w89n6kgd/

The X on the screen brings you back to the play svgs.

This is how I wrote the code:

CSS:

.played.visited {
  fill: green;
}

.played {
  fill: orange;
}

Javascript:

  function markAsVisited(played) {
    played.classList.toggle("visited");
  }

  function markAsPlayed(played) {
    played.classList.add("played");
  }