I’m working on a quiz game,(note that the Answer options are made of anchor tags)

I added code in the options.forEach eventListener, that would set the options pointer-events to “none” so that you cant choose another answer once one has been clicked.

I tried: to make the btn.eventListener ( which is the next button ) among other things, set the bg-color back to gray, and set the options style.pointerEvents = "auto"; so that you can click an option for the next question.

Problem: This code works for re-enabling the ability to click an option again, but I want the hover effect to come back as well. how can I do this?

Repository: https://github.com/JacobPacheco100/Quiz-Games

// Option BTN Events
options.forEach((op) => {
  op.addEventListener("click", (e) => {
    //user input
    const choice = e.currentTarget;
    const choiceClass = e.currentTarget.classList;

    // conditions for BG Color
    if (choiceClass.contains(answerList[currentQuestion])) {
      choice.style.backgroundColor = $green;
    } else {
      choice.style.backgroundColor = $red;
    }

    // GREEN BG for correct answer
    correct();

    // Only select one option
    if ("clicked") {
      options.forEach((op) => {
        op.style.pointerEvents = "none";
      });
    }
  });
});

// HIGHLIGHT CORRECT OPTION
function correct() {
  options.forEach((op) => {
    if (op.classList.contains(answerList[currentQuestion])) {
      op.style.backgroundColor = $green;
    }
  });
}

// Next question BTN
btn.addEventListener("click", () => {
  currentQuestion += 1;
  getQuestion();
  options.forEach((op) => {
    op.style.backgroundColor = $btnCol;
    op.style.pointerEvents = "auto";
  });
});