Buttons will not disable until score is reached and a button is clicked again

I am creating a rock, paper, scissors application. The function play() (shown below) is supposed to check the score and if either score is 0, the endGame() function is supposed to run. If not, the player can continue playing.

Everything works alright until score of 5 is reached for either the player or the computer. The buttons do not disable until another button (either rock, paper, or scissors) is clicked.

I would like it so that the buttons automatically disable when the player or computer score reaches 5 without another button needing to be clicked.I am having trouble trying to get this to occur.

function play() {
    
    calculateScore();
    if(playerScore === 5|| computerScore === 5) {
        endGame();
    } else {
       buttons.forEach(button => {
        button.addEventListener("click", (e) => { 
            let playerSelection = e.target.id;
            console.log("player " + playerSelection);
            playRound(playerSelection);
            calculateScore();
        });
        });
    }
    
    }

Here is the full code in a jsFiddle: https://jsfiddle.net/Jiangxi123/m0g7t6eq/1/

Answer

The problem lies in your calculateScore function. you should update the scores before checking if either of the players have reached 5.

Here is the corrected version of the function:

function calculateScore() {

 // Update the scores
 if (msg.innerHTML.includes("You Lose!")) {
    computerScore += 1;
  } else if (msg.innerHTML.includes("You Win!")) {
    playerScore += 1;
  }

  // Always update the UI (just for a more readable code)
  computerText.innerHTML = computerScore;
  playerText.innerHTML = playerScore;


  // Check the conditions on scores
  if (playerScore === 5 || computerScore === 5) {
    endGame();
  }
}