Avoid duplicate code with lightbox html,css,js

Question

Hello guys i stuck with the following problem:

I want to have more than 1 flex-item with the lightbox/modals for my images with slider. But with this code, it works only for one item. How can i write the code that JavaScript knows it should use the functions only in the clicked container without rename all the functions and so on??

Here is my JavaScript & HTML:

let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides((slideIndex += n));
}

function currentSlide(n) {
  showSlides((slideIndex = n));
}

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("dot");
  if (n > slides.length) {
    slideIndex = 1;
  }
  if (n < 1) {
    slideIndex = slides.length;
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
}

// Open the Modal
function openModal() {
  document.getElementById("myModal").style.display = "block";
  document.body.style.overflow = "hidden";
}

// Close the Modal
function closeModal() {
  document.getElementById("myModal").style.display = "none";
  document.body.style.overflow = "auto";
}

let slideIndexLightbox = 1;
showSlidesLightbox(slideIndexLightbox);

// Next/previous controls
function plusSlidesLightbox(n) {
  showSlidesLightbox((slideIndexLightbox += n));
}

// Thumbnail image controls
function currentSlideLightbox(n) {
  showSlidesLightbox((slideIndexLightbox = n));
}

function showSlidesLightbox(n) {
  let i;
  let slides = document.getElementsByClassName("mySlidesLightbox");
  let dots = document.getElementsByClassName("demo");
  let captionText = document.getElementById("caption");
  if (n > slides.length) {
    slideIndexLightbox = 1;
  }
  if (n < 1) {
    slideIndexLightbox = slides.length;
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndexLightbox - 1].style.display = "block";
  dots[slideIndexLightbox - 1].className += " active";
  captionText.innerHTML = dots[slideIndexLightbox - 1].alt;
}

<article class="flex-item-1">
  <section>
    <div class="slideshow-container">
      <div class="mySlides fade">
        <img src="image.png" onclick="openModal();currentSlideLightbox(1)">
      </div>

      <div class="mySlides fade">
        <img src="image.png" onclick="openModal();currentSlideLightbox(2)">
      </div>

      <div class="mySlides fade">
        <img src="image.png" onclick="openModal();currentSlideLightbox(3)">
      </div>

      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>

      <div style="text-align:center">
        <span class="dot" onclick="currentSlide(1)"></span>
        <span class="dot" onclick="currentSlide(2)"></span>
        <span class="dot" onclick="currentSlide(3)"></span>
      </div>

      <!-- The Modal/Lightbox -->
      <div id="myModal" class="modal">
        <span class="close cursor" onclick="closeModal()">&times;</span>
        <div class="modal-content">

          <div class="mySlidesLightbox">
            <div class="numbertext">1 / 3</div>
            <img src="image.png" style="width:100%">
          </div>

          <div class="mySlidesLightbox">
            <div class="numbertext">2 / 3</div>
            <img src="image.png" style="width:100%">
          </div>

          <div class="mySlidesLightbox">
            <div class="numbertext">3 / 3</div>
            <img src="image.png" style="width:100%">
          </div>

          <a class="prevLightbox" onclick="plusSlidesLightbox(-1)">&#10094;</a>
          <a class="nextLightbox" onclick="plusSlidesLightbox(1)">&#10095;</a>

          <div class="caption-container">
            <p id="caption"></p>
          </div>

          <div class="column-lightbox">
            <img class="demo" src="image.png" onclick="currentSlideLightbox(1)" alt="Nature">

            <img class="demo" src="image.png" onclick="currentSlideLightbox(2)" alt="Snow">

            <img class="demo" src="image.png" onclick="currentSlideLightbox(3)" alt="Snow">
          </div>
        </div>
      </div>
    </div>
  </section>
</article>

Thanks!!