Как сделать несколько слайдеров на одной странице(swiper)?

Question

[Tupic123]

Добрый день! Создал мини попап-галерею используя слайдер и thumb

document.addEventListener('DOMContentLoaded', function() {
   var galleryThumbs = new Swiper('.gallery-thumbs', {
      spaceBetween: 10,
      slidesPerView: 4,
      watchSlidesVisibility: true,
     	watchSlidesProgress: true,
      centerInsufficientSlides: true,
      slideToClickedSlide: true
    });
    var galleryTop = new Swiper('.gallery-top', {
      spaceBetween: 10,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      thumbs: {
        swiper: galleryThumbs
      },
      on: {
      	slideChange: function () {
          let activeIndex = this.activeIndex + 1;
       
					let activeSlide = document.querySelector(`.gallery-thumbs .swiper-slide:nth-child(${activeIndex})`);
          let nextSlide = document.querySelector(`.gallery-thumbs .swiper-slide:nth-child(${activeIndex + 1})`);
          let prevSlide = document.querySelector(`.gallery-thumbs .swiper-slide:nth-child(${activeIndex - 1})`);
          
          if (nextSlide && !nextSlide.classList.contains('swiper-slide-visible')) {
              this.thumbs.swiper.slideNext()	
          } else if (prevSlide && !prevSlide.classList.contains('swiper-slide-visible')) {
              this.thumbs.swiper.slidePrev()	
          }
    
        }
      }
    });
   
   
});

Но как только я начал выводить его в цикле я получаю ошибки:


Как реализовать дальнейшее добавление таких вот слайдеров? Как сделать что бы несколько могло работать на странице используя один и тот же код?

Код цикла прилагаю:

<?php
global $post;

$args = [
    'p' => $postID,
    'post_type'      => 'gallery',
    'posts_per_page' => -1,
    'order'       => 'ASC',

];

$myposts = get_posts( $args );?>

<?php foreach ( $myposts as $post ) {
    setup_postdata( $post );?>

<a href="#myForm-<?php echo $post->ID; ?>" class="popup-link">

        <div class="trainer__box">
            <img src="<?php echo get_field('фото_1')?>" alt="" class="new-trainers-box-img">
          <div class="gallery_descr">
               
            <h4> <span><?php echo get_field('заголовок_новости')?></span></h4>
          </div>
        </div></a>
            
        
        <div id="myForm-<?php echo $post->ID; ?>" class="popup">
        <div id="popup-body" class="popup__body">
      <div class="popup__content modal-content ajax">
        <div class="popup__close">X</div>
        <div class="swiper-container gallery-top">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="<?php echo get_field('фото_1')?>" alt=""></div>
      <div class="swiper-slide">" alt=""></div>
      <div class="swiper-slide">" alt=""></div>
      <div class="swiper-slide"> alt=""></div>
      <div class="swiper-slide"> alt=""></div>
      <div class="swiper-slide">6</div>
      <div class="swiper-slide">7</div>
      <div class="swiper-slide">8</div>
      <div class="swiper-slide">9</div>
      <div class="swiper-slide">10</div>
    </div>
    <!-- Add Arrows -->
    <div class="swiper-button-next swiper-button-white"></div>
    <div class="swiper-button-prev swiper-button-white"></div>
  </div>
  <div class="swiper-container gallery-thumbs">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="<?php echo get_field('фото_1')?>" alt=""></div>
      <div class="swiper-slide"><img src="" alt=""></div>
      <div class="swiper-slide"><img src=" alt=""></div>
      <div class="swiper-slide"><img src="" alt=""></div>
      <div class="swiper-slide"><img src="" alt=""></div>
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
    </div>
  </div>
      </div>
    </div>
  </div>
    <?php get_the_ID();

}

wp_reset_postdata(); ?>