[SOLVED] Open modal with specific id

Open modal with specific id

If i click on the thumbnail of the following code, the general modal with an image slider opens but i can slide through all images of all modals. (Test here: https://www.hanki-testet.com/referenzen#erklaerfilme)

How do i modify the code to open the right modal for each project and only with the slides inside it?

I'm sure there is a way to address each modal's corresponding ID and only show the relevant images of the modal... I just don't know how.

I am so sorry for my bad JS knowledge ...

// Modal Edited

$('.openmodal').click(function() {
$(`#modal${$('.openmodal').index(this) +1}`).addClass('visible');
});

$(".closemodal").click(function() {
  $(".modal").removeClass("visible");
});

$(document).click(function(event) {
  if (!$(event.target).closest(".modal,.openmodal").length) {
    $("body").find(".modal").removeClass("visible");
  }
});


// Manual Slider

var sliderIndex = 1;

function setSlider() {
  showSliders(sliderIndex);
}
//slider image index
function plusSlider(n) {
  showSliders(sliderIndex += n);
}
//dot index
function currentSlider(n) {
  showSliders(sliderIndex = n);
}

function showSliders(n) {
  var i;
  var slides = document.getElementsByClassName("manual-carousel");
  if (n > slides.length) {
    sliderIndex = 1
  }
  if (n < 1) {
    sliderIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slides[sliderIndex - 1].style.display = "block";
}

//Manual Slide
setSlider();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<div id="modal1" class="modal">
  <a class="closemodal">X</a>
  <div class="modal-content">
    <div class="slideshow-container">
      <img class="manual-carousel" src="images/image1.jpg">
      <img class="manual-carousel" src="images/image2.jpg">
      <img class="manual-carousel" src="images/image3.jpg">
      <button class="prev" onclick="plusSlider(-1)">&#10094;</button>
      <button class="next" onclick="plusSlider(1)">&#10095;</button>
    </div>
  </div>
</div>

<div id="modal2" class="modal">
  <a class="closemodal">X</a>
  <div class="modal-content">
    <div class="slideshow-container">
      <img class="manual-carousel" src="images/image4.jpg">
      <img class="manual-carousel" src="images/image5.jpg">
      <img class="manual-carousel" src="images/image6.jpg">
      <button class="prev" onclick="plusSlider(-1)">&#10094;</button>
      <button class="next" onclick="plusSlider(1)">&#10095;</button>
    </div>
  </div>
</div>


<div id="modal3" class="modal">
  <a class="closemodal">X</a>
  <div class="modal-content">
    <div class="slideshow-container">
      <img class="manual-carousel" src="images/image7.jpg">
      <img class="manual-carousel" src="images/image8.jpg">
      <img class="manual-carousel" src="images/image9.jpg">
      <button class="prev" onclick="plusSlider(-1)">&#10094;</button>
      <button class="next" onclick="plusSlider(1)">&#10095;</button>
    </div>
  </div>
</div>


<!-- The elements that lead to the modals -->

<li>
  <a class="openmodal">
    <img class="thumbnail" src="images/thumbnail1.jpg">
    <p>Title</p>
  </a>
</li>

<li>
  <a class="openmodal">
    <img class="thumbnail" src="images/thumbnail2.jpg">
    <p>Title</p>
  </a>
</li>

<li>
  <a class="openmodal">
    <img class="thumbnail" src="images/thumbnail3.jpg">
    <p>Title</p>
  </a>
</li>

Solution

You could select the modal based on the index of the link.

$('.openmodal').click(function() {
    $(`#modal${$('.openmodal').index(this) + 1}`).addClass('visible');
});