Play/Pause button Video Player doesn't work- only on the first div

Question

I have a page that slides vertically (like TikTok) and shows videos, one per page. I put a custom player and when clicking on the video it gives Play/Pause function. So far so good, the problem is that it only works on the first page/section--on the others it doesn't work. The video is displayed, the controls, but the click does not work. Can anyone give me a light/tip?

To navigate between screens I'm using only css- (snap mandatory).

See the example: https://www.veed.io/view/05a15183-d926-456c-b832-2ca02aeeb7a3?panel=share

HTML

    <div class="video-player">
      <video class="video toggleButton" id="video" webkit-playsInline playsinline loop>
        <source
          src="{{$attachment->path}}#t=0.05"
          type="video/mp4" />
        <source
          src="{{$attachment->path}}#t=0.05"
          type="video/webm"/>
        <p>Your browser does not support the latest version.</p>
      </video>
      <div class="controls">
        <div class="progress">
          <div class="progress__filled"></div>
        </div>
      </div>
    </div>

JavaScript

const video = document.querySelector(".video");
const toggleButton = document.querySelector(".toggleButton");
const progress = document.querySelector(".progress");
const progressBar = document.querySelector(".progress__filled");
const sliders = document.querySelectorAll(".controls__slider");

function togglePlay() {
  if (video.paused || video.ended) {
    video.play();
  } else {
    video.pause();
  }
}


function handleProgress() {
  const progressPercentage = (video.currentTime / video.duration) * 100;
  progressBar.style.flexBasis = `${progressPercentage}%`;
}

function scrub(e) {
  const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
  video.currentTime = scrubTime;
}

function handleSliderUpdate() {
  video[this.name] = this.value;
}


toggleButton.addEventListener("click", togglePlay);
video.addEventListener("click", togglePlay);
video.addEventListener("timeupdate", handleProgress);

sliders.forEach((slider) => {
  slider.addEventListener("change", handleSliderUpdate);
});


let mousedown = false;
progress.addEventListener("click", scrub);
progress.addEventListener("mousedown", () => (mousedown = true));
progress.addEventListener("mousemove", (e) => mousedown && scrub(e));
progress.addEventListener("mouseup", () => (mousedown = false));

sliders.forEach((slider) => {
  slider.addEventListener("change", handleSliderUpdate);
});

I tried to make a query selector button for all divs, I tried to do it with id, and it didn't work either. Just works in the first video