Working on The Odin Project Rock-Paper-Scissors enhancement considering DOM manipulation. Been doing it for 3 days, re-worked it a few times, (current version was done via tutorial) and managed to stop the counter once a score of 5 is reached. But, both the computer and player side can still get to 5 points via clicking, even if the opponent has already reached 5pts.

How can I stop the counter for a player if the opponent reached the goal first?

Here's the code:

const SELECTIONS = [
    {
        name: "rock",
        beats: "scissors"
    },
    {
        name: "paper",
        beats: "rock"
    },
    {
        name: "scissors",
        beats: "paper"
    }
]
const yourScoreSpan = document.querySelector("[data-your-score]");
const computerScoreSpan = document.querySelector("[data-computer-score]");

//Player plays
choices.forEach(choice => {
    choice.addEventListener("click", e => {
        const selectionName = choice.dataset.choice;
        const selection = SELECTIONS.find(selection => selection.name === selectionName)
    
        makeSelection(selection)
    })
})


//Selecting R,P,S
function makeSelection(selection) {
    const computerSelection = randomSelection();
    const yourWinner = isWinner(selection, computerSelection);
    const computerWinner = isWinner(computerSelection, selection);
    

    
    if((yourWinner && (yourScoreSpan.innerText < 5) && (computerScoreSpan.innerText !== 5))) 
    incrementScore(yourScoreSpan);
    

    if(computerWinner && (computerScoreSpan.innerText < 5) && (yourScoreSpan.innerText !== 5)) incrementScore(computerScoreSpan);
}

//Incrementing Scores
function incrementScore(scoreSpan) {
    scoreSpan.innerText = parseInt(scoreSpan.innerText) + 1
}


//Computer plays
function randomSelection() {
    const randomIndex = Math.floor(Math.random() * SELECTIONS.length);
    return SELECTIONS[randomIndex];
}

//Who wins
function isWinner(selection, opponentSelection) {
    return selection.beats === opponentSelection.name
}