js html script only works on one gallery?

Question

I made a scrollable gallery with this tutorial: https://www.youtube.com/watch?v=gzXyRa7jwk4&list=PLQthIda1maZcb0ADbOVT4mRYQVHLqSxqL&index=3&t=1s&ab_channel=GreatStack It works fine on my first gallery, however if I try to apply the script to the other two galleries, they don't scroll at all

Here is the code that works

let scrollContainer= document.querySelector (".gallery")
let arrowLeft = document.getElementById("arrowLeft")
let arrowRight = document.getElementById("arrowRight")

scrollContainer.addEventListener ("wheel", (evt) => {
  evt.preventDefault ();
  scrollContainer.scrollLeft +=evt.deltaY;
});

arrowLeft.addEventListener ("click", () => {
  scrollContainer.style.scrollBehavior = "smooth";
  scrollContainer.scrollLeft -= 900;
});

arrowRight.addEventListener ("click", () => {
  scrollContainer.style.scrollBehavior = "smooth";
  scrollContainer.scrollLeft += 900;
});

<section id="Welcome">
  <h2>
    Welcome
  </h2>
  <div class="gallery-wrap">
    <img id="arrowLeft" src="images/arrow_left.jpg">
    <div class="gallery">
      <div>
        <span >
          <a href="https://www.hdm-stuttgart.de/">
            <img src="images/audiovisualmedia.jpg">
            <p>
              Placeholder
            </p>
          </a>
        </span>
        <span>
          <img src="images/hdm.jpg">
        </span>
        <span>
          <img src="images/hdm_building.jpg">
        </span>
        <span>
          <img src="images/mobilemedia.jpg">
      </div>
      <div>
        <span>
          <img src="images/audiovisualmedia.jpg">
        </span>
        <span>
          <img src="images/hdm.jpg">
        </span>
        <span>
          <img src="images/hdm_building.jpg">
        </span>
        <span>
          <img src="images/mobilemedia.jpg">
      </div>
    </div>
    <img id="arrowRight"src="images/arrow_right.png">
  </div>            
</section>

As stated it works, however if I copy both the gallery and the script and give them different classes and IDs (eg. .gallery2 instead .gallery) somehow it doesn't work.

let scrollContainer= document.querySelector (".gallery2")
let arrowLeft2 = document.getElementById("arrowLeft2")
let arrowRight2 = document.getElementById("arrowRight2")

scrollContainer.addEventListener ("wheel", (evt) => {
  evt.preventDefault ();
  scrollContainer.scrollLeft +=evt.deltaY;
});

arrowLeft2.addEventListener ("click", () => {
  scrollContainer.style.scrollBehavior = "smooth";
  scrollContainer.scrollLeft -= 900;
});

arrowRight2.addEventListener ("click", () => {
  scrollContainer.style.scrollBehavior = "smooth";
  scrollContainer.scrollLeft += 900;
});

<section id="Cocktails">
  <h2>
    Cocktails
  </h2>
  <div class="gallery-wrap2">
    <img id="arrowLeft2" src="images/arrow_left.jpg">
    <div class="gallery2">
      <div>
        <span >
          <a href="https://www.hdm-stuttgart.de/">
            <img src="images/audiovisualmedia.jpg">
            <p> Placeholder</p>
          </a>
        </span>
        <span>
          <img src="images/hdm.jpg">
        </span>
        <span>
          <img src="images/hdm_building.jpg">
        </span>
        <span>
          <img src="images/mobilemedia.jpg">
      </div>
      <div>
        <span>
          <img src="images/audiovisualmedia.jpg">
        </span>
        <span>
          <img src="images/hdm.jpg">
        </span>
        <span>
          <img src="images/hdm_building.jpg">
        </span>
        <span>
          <img src="images/mobilemedia.jpg">
      </div>
    </div>
    <img id="arrowRight2"src="images/arrow_right.png">
  </div>            
</section>

Any Idea how I can fix this?

Answer 1

So I have found a very simple solution. I needed to rename the scrollContainer variable in the js for each gallery I have. So for .gallery2 I renamed it creatively scrollContainer2:

<script>
    let scrollContainer2= document.querySelector (".gallery2")
    let arrowLeft2 = document.getElementById("arrowLeft2")
    let arrowRight2 = document.getElementById("arrowRight2")

    scrollContainer2.addEventListener ("wheel", (evt) => {
        evt.preventDefault ();
        scrollContainer2.scrollLeft +=evt.deltaY;
    });

    arrowLeft2.addEventListener ("click", () => {
        scrollContainer2.style.scrollBehavior = "smooth";
        scrollContainer2.scrollLeft -= 900;
    });

    arrowRight2.addEventListener ("click", () => {
        scrollContainer2.style.scrollBehavior = "smooth";
        scrollContainer2.scrollLeft += 900;
    });
</script>

All galleries now work and are scrollable