How come the 2nd exit button is not fading in after clicking the 1st exit button?

The 1st exit button (.exitA) fades in without an issue.

The 2nd exit button (.exitB) should fade in after the curtain goes up.

It does not.

How do I fix this?

https://jsfiddle.net/8c4e129f/

.exitA,
.exitB {
  opacity: 0;
  transition: opacity 3s ease-in;
  transition-delay: 0s;
  pointer-events: none;
}

.exitA.visible,
.exitB.visible {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}




function showExit(containerSelector, exitSelector) {
    const container = document.querySelector(containerSelector);
    const closeButton = document.querySelector(exitSelector);
    container.classList.remove("hide");
    container.classList.add("slide");
    container.addEventListener("transitionend", function() {
      closeButton.classList.add("visible");
    });
  }


  function removePlayer() {
    videoPlayer.destroyPlayers();
  }

  function resetPage() {
    hideContainer(".video-containerA");
    // showContainer(".video-containerB");
    showExit(".video-containerB",".exitB");
    removePlayer();
  }