API에서 데이터를 가져와 일련의 질문을 작성한 다음 배열에서 무작위로 선택된 질문에 따라 매번 퀴즈 페이지에 다른 수의 "답변 요소"를 로드하는 퀴즈 앱을 만들고 있습니다.

아래는 CSS 카드 스타일에 대한 실제 답변인 클릭 가능한 "플레이어 카드" 시리즈를 생성하는 기능입니다. 사용자가 카드를 선택한 다음 확인 버튼을 클릭하면 카드가 맞는지 확인하는 기능이 실행된다는 아이디어입니다.

한 가지 빼고는 기능이 잘 작동합니다. 사용자는 모든 카드를 선택할 수 있습니다.

제가 가진 문제는 모든 답변을 클릭하면 모두 CSS 클래스를 가져오고 데이터는 선택한 모든 카드/답변에 전달된다는 것입니다.

사용자가 하나의 답변을 선택하기를 원합니다. 카드를 클릭한 후 마음을 바꿀 수 있지만, 답을 선택한 후 답안 확인 기능만 진행할 수 있습니다.

어떻게 해야할지 모르겠나요? 이를 달성하기 위해 이 코드를 어떻게 변경해야 하는지 이해하도록 도와줄 수 있는 사람이 있나요?

function addClickEvent(answers) {
  const playerCard = document.querySelectorAll(".player-card");
  for (i = 0; i < playerCard.length; i++) {
    playerCard[i].setAttribute("id", [i]);
    playerCard[i].addEventListener("click", (e) => {
      clickedPlayer = e.target;
      clickedPlayer.classList.add("border-lime-500");
      clickedPlayer.classList.add("border-8");
      let userAnswer = answers[clickedPlayer.id];
      
      checkButton.addEventListener("click", () => {
        checkAnswer(userAnswer, answers);
      });
    });
  }
}