How can I make three diffrent overlays with three images?

Question

I'm currently in the process of creating a website with a gallery.

I want to have three images on which you can click, and three different galleries appear. For example, you click on the first picture and then a gallery will appear.

I have tried it with the help of the overlay element, but the problem is now no matter which image I click, the same gallery appears.

function on() {
  document.getElementById("overlay").style.display = "block";
}

function off() {
  document.getElementById("overlay").style.display = "none";
}

function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  expandImg.parentElement.style.display = "block";
}

<div class="Galerie">
  <div class="column">
    <div style="padding:10px">
      <img src="img/A1.jpg" onclick="on()" alt="Snow" style="width: 100%;">
    </div>
  </div>
  <div class="column">
    <div style="padding:10px">
      <img src="img/B3.jpg" onclick="on()" alt="Forest" style="width:100%">
    </div>
  </div>
  <div class="column">
    <div style="padding:10px">
      <img src="img/C1.JPG" onclick="on()" alt="Mountains" style="width:100%">
    </div>
  </div>
</div>

<div id="overlay" ondblclick="off()">
  <div id="text" img data-src="">


    <!-- The four columns -->
    <div class="row">
      <div class="Reiheeins">
        <img src="img/A1.jpg" alt="Nature" style="width:100%" onclick="myFunction(this);">
      </div>
      <div class="Reiheeins">
        <img src="img/A2.jpg" alt="Snow" style="width:100%" onclick="myFunction(this);">
      </div>
      <div class="Reiheeins">
        <img src="img/A3.jpg" alt="Mountains" style="width:100%" onclick="myFunction(this);">
      </div>
      <div class="Reiheeins">
        <img src="img/A4.jpg" alt="Lights" style="width:100%" onclick="myFunction(this);">
      </div>
    </div>

    <div class="container">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
      <img id="expandedImg" style="width:100%">
      <div id="imgtext"></div>
    </div>

  </div>
</div>




<div id="overlay" ondblclick="off()">
  <div id="text" img data-src="">


    <!-- The four columns -->
    <div class="row1">
      <div class="Reihezwei">
        <img src="img/B3.jpg" alt="Nature" style="width:100%" onclick="myFunction(this);">
      </div>
      <div class="Reihezwei">
        <img src="img/B4.jpg" alt="Snow" style="width:100%" onclick="myFunction(this);">
      </div>
      <div class="Reihezwei">
        <img src="img/B6.jpg" alt="Mountains" style="width:100%" onclick="myFunction(this);">
      </div>
      <div class="Reihezwei">
        <img src="img/B2.jpg" alt="Lights" style="width:100%" onclick="myFunction(this);">
      </div>
    </div>

    <div class="container">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
      <img id="expandedImg" style="width:100%">
      <div id="imgtext"></div>
    </div>

Answer 1

Use data attributes and eventListeners

Here is an example that will show on click and hide when clicking the X

document.addEventListener('DOMContentLoaded', () => {
  const gallery = document.querySelector('.Galerie');
  const overlays = document.querySelectorAll('.overlay'); // if you want to close the siblings you can loop over these in the click event
  // delegate from container
  gallery.addEventListener('click', event => {
    const target = event.target;
    if (target.tagName === 'IMG') {
      const overlayId = target.dataset.overlay;
      const overlay = document.getElementById(overlayId);
      if (overlay) {
        overlay.hidden = false
        // Additional logic for setting expanded image src and text
      }
    }
  });
  // delegate from body - if you wrap the overlays in a div, change this delegation to be from that container
  document.body.addEventListener('click', event => {
    const closeBtn = event.target.closest('.closebtn');
    if (closeBtn) {
      const overlay = closeBtn.closest('.overlay');
      if (overlay) {
        overlay.hidden = true;
      }
    }
  });
});

<div class="Galerie">
  <div class="column">
    <div style="padding:10px">
      <img src="img/A1.jpg" data-overlay="overlay1" alt="Snow" style="width: 100%;">
    </div>
  </div>
  <div class="column">
    <div style="padding:10px">
      <img src="img/B3.jpg" data-overlay="overlay2" alt="Forest" style="width:100%">
    </div>
  </div>
  <div class="column">
    <div style="padding:10px">
      <img src="img/C1.JPG" data-overlay="overlay3" alt="Mountains" style="width:100%">
    </div>
  </div>
</div>

<div id="overlay1" class="overlay">
  <!-- Overlay content -->
  <div class="container">
    <span class="closebtn">&times;</span>
    <img id="expandedImg1" style="width:100%">
    <div id="imgtext1">Snow</div>
  </div>
</div>

<div id="overlay2" class="overlay" hidden>
  <!-- Overlay content for second overlay -->
  <div class="container">
    <span class="closebtn">&times;</span>
    <img id="expandedImg2" style="width:100%">
    <div id="imgtext2">Forest</div>
  </div>
</div>
<div id="overlay3" class="overlay" hidden>
  <!-- Overlay content for third overlay -->
  <div class="container">
    <span class="closebtn">&times;</span>
    <img id="expandedImg3" style="width:100%">
    <div id="imgtext3">Mountains</div>
  </div>
</div>