我正在建立一个网站，我有多个图像 （总共七个）。

对于每个图像，我需要一个按钮出现时，图像悬停。
按钮是一个加号 （+） 的小.png图像。

当按钮被单击时：

• 按钮图像变为水平线
• 社交媒体图标滑入右侧。

我在一张图片上运行得很好。问题是，当我在其他图片上应用相同的JavaScript代码时，它就不工作了。我试着把我所有的ID都改为Classes，但还是不行。我怎么才能让它工作呢？
下面是我的代码，可以看到：http://box5385.temp.domains/~atelifw5/test-2/

// Controls social media reveal animation
function myFunction() {
  console.log("Button clicked");

  var img = document.getElementById("cross.img");
  var x = document.getElementById("hidden-social");

  x.addEventListener("animationend", function(e) {
    e.preventDefault();

    if (x.style.animationName == "slide-left") {
      x.style.display = "none";
    }
  });

  if (x.style.display === "none") {
    x.style.display = "block";
    x.style.animation = "1s slide-right";

    img.src = "http://box5385.temp.domains/~atelifw5/wp-content/uploads/2022/12/horiz.thin_.png";
  } else {
    x.style.animation = "1s slide-left";

    img.src = "http://box5385.temp.domains/~atelifw5/wp-content/uploads/2022/12/cross.thin_.png";
  }
}

// Controls the cross-button so fading image
// stays faded when cross-button is hovered
document.getElementById("cross-button").onmouseover = function() {
  mouseOver()
};

document.getElementById("cross-button").onmouseout = function() {
  mouseOut()
};

function mouseOver() {
  document.getElementById("fading-image").style.opacity = "0.5";
}

function mouseOut() {
  document.getElementById("fading-image").style.opacity = "1";
}

// Controls the fading image, so it remains
// faded after hover-off of cross-button
document.getElementById("fading-image").onmouseover = function() {
  mouseOver()
};

document.getElementById("fading-image").onmouseout = function() {
  mouseOut()
};

function mouseOver() {
  document.getElementById("fading-image").style.opacity = "0.5";
}

function mouseOut() {
  document.getElementById("fading-image").style.opacity = "1";
}

// Controls the cross-button, so it is visible when the
// hidden-social container is hovered
document.getElementById("hidden-social-container").onmouseover = function() {
  mouseOver()
};

document.getElementById("hidden-social-container").onmouseout = function() {
  mouseOut()
};

function mouseOver() {
  document.getElementById("fading-image").style.opacity = "0.5";
  document.getElementById("cross-button").style.opacity = "1.0";
}

function mouseOut() {
  document.getElementById("fading-image").style.opacity = "1";
  document.getElementById("cross-button").style.opacity = "0";
}

/*Fade image*/

#container {
  overflow: auto;
}

#cross-button {
  cursor: pointer;
  position: relative;
  top: -55px;
  left: -54%;
  opacity: 0;
  transition: opacity 1s;
  z-index: 9999;
  width: 32px;
  float: right;
}

#fading-image>img {
  opacity: 1;
  transition: opacity 1s;
  width: auto;
}

#fading-image:hover {
  opacity: 0.5;
  transition: opacity 1s;
}

#fading-image:hover~#cross-button,
#cross-button:hover {
  opacity: 1;
}

.social-icon-2 {
  width: 25px;
}

.social-icon-p2 {
  width: 15px;
}

#hidden-social-container {
  width: 200px;
  height: 32px;
  position: relative;
  top: -52px;
  left: -48%;
  overflow: hidden;
  float: right;
}

#hidden-social-container:hover~#cross-button,
#cross- button:hover {
  opacity: 1;
}

#hidden-social {
  width: auto;
}

@keyframes slide-right {
  from {
    margin-left: -100%;
  }
  to {
    margin-left: 0%;
  }
}

@keyframes slide-left {
  from {
    margin-left: 0%;
  }
  to {
    margin-left: -100%;
  }
}

<!--- HTML --->
<div id="cross-container">
  <div id="fading-image">
    <img src="http://box5385.temp.domains/~atelifw5/wp-content/uploads/2022/12/RO_PIX_EV_03_1320px.png">
  </div>

  <div id="cross-button" onclick="myFunction()">
    <img id="cross.img" src="http://box5385.temp.domains/~atelifw5/wp-content/uploads/2022/12/cross.thin_.png">
  </div>
  <div id="hidden-social-container">
    <div id="hidden-social" style="display:none;">
      <a href="https://instagram.com" target="blank">
        <img class="social-icon-2" src="http://box5385.temp.domains/~atelifw5/wp-content/uploads/2022/12/Instagram_Black.svg">
      </a>
      <a href="https://www.facebook.com/sharer/sharer.php?u=http://box5385.temp.domains/~atelifw5/east-village" target="blank">
        <img class="social-icon-2" src="http://box5385.temp.domains/~atelifw5/wp-content/uploads/2022/12/Facebook_Black.svg">
      </a>
      <a href="https://twitter.com/share?url=http://box5385.temp.domains/~atelifw5/east-village/" target="_blank">
        <img class="social-icon-2" src="http://box5385.temp.domains/~atelifw5/wp-content/uploads/2022/12/Facebook_Black.svg">
      </a>
      <a href="https://www.linkedin.com/shareArticle?url=http://box5385.temp.domains/~atelifw5/east-village" target="blank">
        <img class="social-icon-2" src="http://box5385.temp.domains/~atelifw5/wp-content/uploads/2022/12/LinkedIn_Black.svg">
      </a>
      <a href="https://pinterest.com/pin/create/button/" target="blank">
        <img class="social-icon-p2" src="http://box5385.temp.domains/~atelifw5/wp-content/uploads/2022/12/Pinterest_Black.svg">
      </a>
    </div>
  </div>
</div>