I'm building a quiz game and I have a working checkAnswer() function and increaseCorrectScore() function. Once the user has clicked a button (one out of three buttons is correct) it will either return correct or wrong then a 'Next' button appears and the user will click to load the nextQuestion() function (function not yet called in code below). My problem: at the moment the user can click on the wrong answer, but can then still click on the correct answer and score a point. They can also keep clicking on the correct answer to cheat in the game. How can I:

1. stop the user from clicking on the correct answer if they have first clicked on a wrong answer?
2. stop the user from repeatedly clicking on the correct answer to increase their score before clicking 'Next' for the next question?

I would like to leave the Next button and the functionality that has the user clicking for the next question, rather than simply running nextQuestion() after the first click on an answer.

function checkAnswer() {
    if (this.textContent === newFlags[currentFlagIndex].country) {
        let correct = true
        let correctAnswer = `CORRECT!`
        document.getElementById('result').innerHTML = correctAnswer;
        nextButton.classList.remove('hide');
        setStatusClass(document.body, correct)
        increaseCorrectScore();
    } else {
        let wrong = false
        let wrongAnswer = `WRONG!`
        document.getElementById('result').innerHTML = wrongAnswer;
        nextButton.classList.remove('hide');
        setStatusClass(document.body, wrong)
    }
}
/**
 * Gets the current score from the DOM and increments it by 1
 */
function increaseCorrectScore() {
    let currentScore = parseInt(document.getElementById('correct').innerText);
    document.getElementById('correct').innerText = ++currentScore;
}

The HTML:

<!-- GAME AREA -->
    <div class="container">
        <div id="timer"></div>
        <div class="flag"><img src="" id="flag"></div>
        <div id="answer-buttons" class="answer-box">
            <button class="btn" id="answer-1">Country 1</button>
            <button class="btn" id="answer-2">Country 2</button>
            <button class="btn" id="answer-3">Country 3</button>
        </div>
        <div id="result" class="result"></div>
        <div class="answer-box"><button class="next-btn hide" id="next-question">Next flag >></button></div>
        <div class="score">Score: <span id="correct" class="score">0</span></div>
    </div>