The playback function does not work when there is more than one movie

Question

I create several video elements on the website. Everything works fine, but when there is more than one movie, you can only play the first one by clicking "play-gif". Where am I making a mistake?

html:

 <section class="video">
    <div class="container">
<h1>Video Player</h1>
<div class="video-wrapper">
    <div class="video-container" id="video-container">
        <video controls id="video" preload="metadata" poster="//cdn.jsdelivr.net/npm/[email protected]/poster.jpg">
            <source src="//cdn.jsdelivr.net/npm/[email protected]/video.mp4" type="video/mp4">
        </video>

        <div class="play-button-wrapper">
            <div title="Play video" class="play-gif" id="circle-play-b">
                <!-- SVG Play Button -->
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
                    <path d="M40 0a40 40 0 1040 40A40 40 0 0040 0zM26 61.56V18.44L64 40z" />
                </svg>
            </div>
        </div>
    </div>
</div>
</div> <!-- End Container -->
</section>

jquery

circlePlayButton.addEventListener("click", this.togglePlay);
video.addEventListener("playing", function () {
    circlePlayButton.style.opacity = 0;
  
});
video.addEventListener("pause", function () {
    circlePlayButton.style.opacity = 1;
});