How to determine div's ordinal for JS modal gallery?

Question

JavaScript

The html page displays a list of pictures, each of which is wrapped in a layer with one class. When you click on any of the pictures in the modal, a gallery opens. The countdown there is from the first picture, which is clear from the following code. How can I make it so that on the click event, the gallery opens exactly from the selected element?

<section class="catalog section" id="catalog">
      ...
        <div class="catalog-wrap" id="toCatalog">   

          <div class="catalog-wrap__item  lakobel mirror bedroom ">
            <div class="catalog-wrap__img toGallery"><img data-src="img/catalog/image (1).jpg" alt=""></div>
            <form action="#" id="catalog-form1" class="catalogForm">
              <input type="text" name="size" id="" placeholder="Введите размер Ш х В х Г"
                class="input-size catalog-wrap__input" required>
              <input type="tel" name="phone" id="" class="catalogInput input-phone catalog-wrap__input"
                placeholder="x (xxx) xxx xx-xx" required>
              <button type="submit" class="button catalog-wrap__button">УЗНАТЬ ЦЕНУ</button>
            </form>
          </div>
         <!-- Далее идут аналогичные div с ссылками на картинки image ([2,3,...,112]).jpg-->
         </div>
      </section>

var s1,s2,s,n;
  var i=1;
  
  $('.toGallery').on('click', function () {
    // initGallery;
    // $("body").css("overflow-y","hidden");
    $('.body').addClass('no-scroll');
    // jQuery('#scrollbar').tinyscrollbar({
    //   scroll: false,
    // });   
    s1 = '<div class="gallery-slider__item"><div class="gallery-slider__img"><img src="img/catalog/image (';
    s2 = ').jpg" alt=""></div></div>';
    n=112; //число картинок
    $('#gallery').addClass('gallery_active');
    for (var i=n;i>1;i--){
      s = s1 + i +s2;
      $('#gallerySliderFirst').after(s);
    }
    $('#gallerySliderFirst').lazyLoadXT();

    $("#galleryslider").slick('reinit');
    $('.gallery-arrow__img').lazyLoadXT();

  });
    
  $('#closeGallery').on('click', function () {
    // $("body").css("overflow-y","visible");
    $('.body').removeClass('no-scroll');
    var scrollTop = $('#toCatalog').offset().top;
    $(document).scrollTop(scrollTop);

    $('#gallery').removeClass('gallery_active');

    if($(document).width()<=800){
      $("#galleryslider").slick('unslick');
    }
  });

  $('#galleryslider').slick({
    infinite: true,
    slidesToShow: 2,
    slidesToScroll: 1,
    speed: 700,
    rows: 1,
    autoplay: true,
    autoplaySpeed: 1500,
    prevArrow: $('.gallery-arrow__left'),
    nextArrow: $('.gallery-arrow__right'),
    responsive: [
      {
        breakpoint: 800,
        settings: {
          arrows: false,
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
 
    ]
  });

Answer 1

Get the number of the clicked element:
Switch to the corresponding slide:
$('#galleryslider').slick('slickGoTo', index);