Javascript display none property not being triggered the second time

I am using onlick method on a button, on game start and re start. I am making the button’s parent node’s display none on that click. It works the first time when I click (i.e start the game) but after the game is over, when I try to re start the game using the same button, the display:none property is not working.

HTML part of the button and it’s parent node

<div class="game-start-play" id="game-start-play">
            <button id="play-start">Click to play</button>
          </div>

In javascript part, I am clicking the button, then doing some animation and when the animation stops, when I try to re start it the display none property is not working.

const startButton = document.getElementById("play-start");

const gameAnimation = new GameAnimation(parentElement);
window.addEventListener("keydown", gameAnimation.moveCar);

startButton.onclick = () => {
  startButton.parentNode.style.display = "none";
  gameAnimation.init();
};