multiple scrolling galleries

Question

I'm a noob and can't find something like this to help me out. I have a few cards and every card has a small gallery of it's own, but every time just one works and when the first gallery is scrolled through then another one starts. how can I split them?

    function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("demo");
  let captionText = document.getElementById("caption");
  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";
  captionText.innerHTML = dots[slideIndex-1].alt;
}

Here's the card html with modal ID and mySlides for slides:

<div class="col-md-4 item posudaplastika"> 
    <div class="card mb-4 product-wap rounded-0">
                            
        <div data-toggle="modal" data-target="#myModal001" class="card rounded-0">
            <div class="mySlides">
                  <img src="/assets/img/posude/posuda1a.jpeg" style="width:100%">
              </div>
            
              <div class="mySlides">
                  <img src="/assets/img/posude/posuda1b.jpg" style="width:100%">
              </div>
            
              <div class="mySlides">
                  <img src="/assets/img/posude/posuda1c.jpeg" style="width:100%">
              </div>
            
              <div class="mySlides">
                  <img src="/assets/img/posude/posuda1d.jpeg" style="width:100%">
              </div>
        </div>
            
        
    <a class="prev" onclick="plusSlides(-1)"><i class="fa-solid fa-chevron-left"></i></a>
    <a class="next" onclick="plusSlides(1)"><i class="fa-solid fa-chevron-right"></i></a>
        
                            

  <!-- Pop-up window -->
  <div class="modal fade" id="myModal001"> <!-- ID za pop up model, ici po id itema po tabeli -->
    <div class="modal-dialog custom-modal-dialog">
        <div style="background-color: #f8f8f8;" class="modal-content">

            <div class="row">    
        <div class="galerija-modal-div">
           <img src="/assets/img/posude/posuda1a.jpeg" alt="">
           <img src="/assets/img/posude/posuda1b.jpg"  alt="">
           <img src="/assets/img/posude/posuda1c.jpeg" alt="">
           <img src="/assets/img/posude/posuda1d.jpeg" alt="">
        </div>

And the second one, same mySlides ID but different Modal ID:

<div class="col-md-4 item drzac razno"> <!-- ID za pretragu -->
    <div class="card mb-4 product-wap rounded-0">
                            
        <div data-toggle="modal" data-target="#myModal002" class="card rounded-0">
            <div class="mySlides">
                  <img src="/assets/img/razno1a.jpeg" style="width:100%">
              </div>
            
              <div class="mySlides">
                  <img src="/assets/img/razno1b.jpeg" style="width:100%">
              </div>
            
              <div class="mySlides">
                  <img src="/assets/img/razno1c.jpeg" style="width:100%">
              </div>
            
              <div class="mySlides">
                  <img src="/assets/img/razno1d.jpeg" style="width:100%">
              </div>
            
              <div class="mySlides">
                  <img src="/assets/img/razno1e.jpeg" style="width:100%">
              </div>
            
              <div class="mySlides">
                  <img src="/assets/img/razno1f.jpeg" style="width:100%">
              </div>
            
              <div class="mySlides">
                  <img src="/assets/img/razno1g.jpeg" style="width:100%">
              </div>
            
            
        </div>
            
        
    <a class="prev" onclick="plusSlides(-1)"><i class="fa-solid fa-chevron-left"></i></a>
    <a class="next" onclick="plusSlides(1)"><i class="fa-solid fa-chevron-right"></i></a>
        
                            

<!-- Pop-up window -->
<div class="modal fade" id="myModal002"> <!-- ID za pop up model, ici po id itema po tabeli -->
<div class="modal-dialog custom-modal-dialog">
<div style="background-color: #f8f8f8;" class="modal-content">
    

<div class="row">
<div class="galerija-modal-div">
    <img src="/assets/img/razno1a.jpeg" alt="">
    <img src="/assets/img/razno1b.jpeg" alt="">
    <img src="/assets/img/razno1c.jpeg" alt="">
    <img src="/assets/img/razno1d.jpeg" alt="">
    <img src="/assets/img/razno1e.jpeg" alt="">
    <img src="/assets/img/razno1f.jpeg" alt="">
    <img src="/assets/img/razno1g.jpeg" alt="">
    
  
</div>