2nd exit button should remove any of the players

Click on the first play button, then click the exit button. Next, Click any of the first 4 videos, then click the exit button that is at the bottom, the video does not get removed.

Clicking on the 1st play button removes player, clicking on any of the next 4 videos, then clicking the exit button which is at the bottom, does not remove video.

How would this be fixed in the code so that clicking any of those 4 videos, then clicking the exit will remove the video?

code https://jsfiddle.net/4j6h51y2/

What seems to be the issue, and how would this be fixed?

How would it be fixed in the code so that any of those 4 videos can be removed the one exit2 class button?

`<div class="curtain remove">`

`<button class="exit exit2" type="button" aria-label="Open"></button>`
  function removePlayerHandler(evt) {
    const el = evt.target;
    const container = el.closest(".remove");
    const wrapper = container.querySelectorAll(".wrap");
    wrapper.forEach(function(wrapper) {
      if (wrapper.player) {
        removePlayer(wrapper);
      }
    });
  }
(function showContainer3() {

  function hide(el) {
    el.classList.add("hide");
  }

  function show(el) {
    el.classList.remove("hide");
  }

  function exitClickHandler() {
    const thewrap = document.querySelector(".container3");
    show(thewrap);
    const cover = document.querySelector(".container2");
    hide(cover);
  }

  const cover = document.querySelector(".exit2");
  cover.addEventListener("click", exitClickHandler);
})();
 function addExitHandlers(callback) {
    const resetVideo = document.querySelectorAll(".exit");
    resetVideo.forEach(function resetVideoHandler(video) {
      video.addEventListener("click", callback);
    });
  }

  function init() {
    findPlayers();
    const exitButtons = document.querySelectorAll(".exit");
    addClickToExit(exitButtons);

  }

  return {
    addExitHandlers,
    getWrapper,
    init
  };
}());