我做了一个可滚动的画廊与本教程：https://www.youtube.com/watch?v=gzXyRa7jwk4&list=PLQthIda1maZcb0ADbOVT4mRYQVHLqSxqL&index=3&t=1s&ab_channel=GreatStack它的作品在我的第一个画廊罚款，但是，如果我试图将脚本应用到其他两个画廊，他们不滚动在所有
下面是运行的代码

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;
});

个字符
如前所述，它的工作，但是，如果我复制画廊和脚本和给予他们不同的类和ID（如.gallery2而不是.gallery）不知何故，它不工作。

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>

的字符串
你知道我该怎么补救吗？