I am implementing a game of set using javascript. I have a class to discern whether or not the card is being selected and I will add the class to this when this method is called, which is when the card is clicked as there is an eventListener for it. However, the issue I have is implementing a deselect eventListener to be able to click so the selected class is gone but be able to click again and the selected class is back and behaves as it would have earlier. Here is the code for the function that runs when you select the card:

function cardSelected() {
  let setCount = qs('#set-count');
  let board = qs('#board');
  this.classList.add('selected');
  let selected = qsa('#board .selected');
  let count = selected.length;
  if (count === 3 && isASet(selected)) {
    for (let i = 0; i < selected.length; i++) {
      let card = generateUniqueCard(true);
      board.replaceChild(card, selected[i]);
      selected[i].classList.remove('selected');
      let paragraph = createParagraph('SET!');
      let timer = setTimeout((i) => {
        card.classList.add('hide-imgs');
        card.appendChild(paragraph);
      }, 0);
      setTimeout(() => {
        clearTimeout(timer);
        card.classList.remove('hide-imgs');
        card.removeChild(paragraph);
      }, 1000);
    }
    setCount.textContent = parseFloat(setCount.textContent) + 1;
  } else if (count === 3 && !isASet(selected)) {
    for (let i = 0; i < selected.length; i++) {
      selected[i].classList.remove('selected');
      let paragraph = createParagraph('Not a Set');
      let card = generateUniqueCard(true);
      board.replaceChild(card, selected[i]);
      let timer = setTimeout((i) => {
        card.classList.add('hide-imgs');
        card.appendChild(paragraph);
      }, 0);
      setTimeout((i) => {
        clearTimeout(timer);
        card.classList.remove('hide-imgs');
        card.removeChild(paragraph);
      }, 1000);
    }
  }
}