How to assign the handler to the correct play button

Clicking a play button starts all videos that have been previously played - the stop button works and no video is playing when the play buttons are on display.

Starting the videos other than the one play button that was previously clicked is supposed to start, and the other videos are supposed to be stopped.

That is the bug that needs to be fixed.

Clicking one of the play buttons when videos are stopped should only start one video, not multiple videos.

To reproduce issue: Click on one play button, and the video loads.

Then Click on the X

Now click on a different play button and you will see, the video that was clicked on before is now playing, along with the video I just clicked on. So now there are 2 videos playing at the same time.

This code is run each time I create a new player.

I am assigning the handler to play the video to every play button which is why all the videos play at once.

How do I assign the handler to the correct play button for that player?

How would I find the specific play button I need?

Click Run, not update to test code.

Code: https://jsitor.com/EBO8gdOs0c

Backup copy: https://jsfiddle.net/5etxr1kg/

function createPlayHandler(player) {    const playButtons = document.querySelectorAll(".thePlay");    playButtons.forEach(function playButtonHandler(buttons) {      buttons.addEventListener("click", function buttonClickHandler() {        player.playVideo();      });    });  }