why is my classlist.remove not removing the class?

i'm currently working on a paper, rock, scissors game. i have pretty much everything working except getting a rematch button to show up at the end of a game. i've been able to successfully hide the button by grabbing it const rematchButton = document.querySelector('.hiddenButton'); and adding a classlist of hidden with rematchButton.classList.add('hidden');. in the css file, i have the class of hidden set to display: none;. i have a message that will show up once the player or computer has reached 5 wins and have added rematchButton.classList.remove('hidden'); which i would expect for the rematch button to then show up alongside the "game over" message but the button is still not showing up, only the "game over" message shows up. am i putting the classlist.remove in the wrong place?

this is the portion of my html file that contains the rematch button:

        <div id="results">
            <div class="rematchGroup">
                <!-- <img src="photos/rematch.jpg"> -->
                <br>
                <button class="buttons hiddenButton">rematch?</button>  
            </div>
        </div>  

and this is the javascript file:

// DECLARES A VARIABLE TO HOLD AN ARRAY OF CHOICES
const choices = ['rock', 'paper', 'scissors'];
// DECLARES A VARIABLE FOR PLAYERSCORE AND COMPUTERSCORE AND SETS THEM TO 0
let playerScore = 0;
let computerScore = 0;
// DECLARES A VARIABLE FOR PLAYERSELECTION AND SETS IT TO AN EMPTY STRING
let playerSelection = '';

// DECLARES VARIABLES FOR ROCK, PAPER, & SCISSORS AND ASSIGNS IT TO THE RPS BUTTON ID'S
const rock = document.querySelector('#rock');
const paper = document.querySelector('#paper');
const scissors = document.querySelector('#scissors');

const rematchButton = document.querySelector('.hiddenButton');
rematchButton.classList.add('hidden');

// FUNCTION TO SELECT ONE OF THE CHOICES ARRAYS AT RANDOM
function computerPlay() {
    return choices[~~(Math.random() * choices.length)];
} 

// EVENTLISTENERS FOR BUTTON CLICKS TO CORRELATE WITH PLAYERSELECTION
rock.addEventListener('click', () => {
    playerSelection = 'rock';
    playGame();
});
paper.addEventListener('click', () => {
    playerSelection = 'paper';
    playGame();
});
scissors.addEventListener('click', () => {
    playerSelection = 'scissors';
    playGame();
});

// FUNCTION TO COMPARE PLAYERSELECTION WITH COMPUTERSELECTION
// INCREMENTS THE PLAYER & COMPUTER SCORE
// DISPLAYS MESSAGE SUMMARY OF WHO WON THE ROUND
function playRound(playerSelection, computerSelection) {
    if (playerSelection === computerSelection) {
        document.getElementById('results').innerHTML = 'you\'ve tied!'
    } else if (computerSelection === 'paper' && playerSelection === 'rock') {
        document.getElementById('results').innerHTML = 'you\'ve lost that round! you chose rock, the computer chose paper.';
        computerScore += 1;
    } else if (computerSelection === 'scissors' && playerSelection === 'paper') {
        document.getElementById('results').innerHTML = 'you\'ve lost that round! you chose paper, the computer chose scissors.';
        computerScore += 1;
    } else if (computerSelection === 'rock' && playerSelection === 'scissors') {
        document.getElementById('results').innerHTML = 'you\'ve lost that round! you chose scissors, the computer chose rock.';
        computerScore += 1;
    } else if (computerSelection === 'rock' && playerSelection === 'paper') {
        document.getElementById('results').innerHTML = 'you\'ve won that round! you chose paper, the computer chose rock.';
        playerScore += 1;
    } else if (computerSelection === 'paper' && playerSelection === 'scissors') {
        document.getElementById('results').innerHTML = 'you\'ve won that round! you chose scissors, the computer chose paper.';
        playerScore += 1;
    } else if (computerSelection === 'scissors' && playerSelection === 'rock') {
        document.getElementById('results').innerHTML = 'you\'ve won that round! you chose rock, the computer chose scissors.';
        playerScore += 1;
    } else {
        document.getElementById('results').innerHTML = 'that\'s not an acceptable answer!'
    }
}

// FUNCTION THAT ASSIGNS COMPUTERPLAY(FUNCTION) TO COMPUTERSELECTION(VARIABLE)
// RUNS THE PLAYROUND FUNCTION
// DISPLAYS COMPUTER & PLAYER SCORE
// RUNS THE ENDGAME FUNCTION WHEN PLAYER OR COMPUTER REACHES 5 WINS
function playGame() {
    computerSelection = computerPlay();
    playRound(playerSelection, computerSelection);

    

    // const results = document.getElementById('results');
    // const resultsContent = document.createElement('div');
    // resultsContent.textContent = roundResult;
    // results.appendChild(resultsContent);

    const score = document.getElementById('roundScore');
    document.getElementById('roundScore').innerHTML = `player score: ${playerScore} | computer score: ${computerScore}`;

    if (playerScore < 5 && computerScore < 5) {
        return;
    } else if (playerScore === 5 || computerScore === 5) {
        endGame();
    } else if (playerScore === 6 || computerScore === 6) {
        location.reload();
    }
}

// FUNCTION THAT DISPLAYS GAME OVER MESSAGE WHEN RAN
function endGame() {
    if (playerScore > computerScore) {
    document.getElementById('results').innerHTML = 'GAME OVER <BR> you win! you\'ve beat the computer to 5 wins.';
    rematchButton.classList.remove('hidden');
    } else if (computerScore > playerScore) {
    document.getElementById('results').innerHTML = 'GAME OVER <BR> you lose! the computer has beat you to 5 wins';
    rematchButton.classList.remove('hidden');
    }
}