The script does not work when there is more than one slider on the page

Question

I have a slider on the page that switches images

<div class="custom-carousel-section">
  <div class="custom-container">
    <div class="custom-carousel">
      @if(!empty($article_block_images))
        @foreach($article_block_images as $article_block_image)
          <div class="custom-carousel__title">
            @if($loop->first)
              <span>{{ $article_block_image->title }}</span>
            @endif
          </div>
        @endforeach
      @endif
      @if(!empty($article_block_images))
        @foreach($article_block_images as $article_block_image)
          <div class="main-image" style="display: {{ $loop->first ? 'block' : 'none' }}">
            <picture>
              <source srcset="{{ $article_block_image->mobile_image }}" media="(max-width: 576px)" alt="{{ $article_block_image->image_alt }}" title="{{ $article_block_image->image_title }}" data-title="{{ $article_block_image->title }}">
              <source srcset="{{ $article_block_image->main_image }}" alt="{{ $article_block_image->image_alt }}" title="{{ $article_block_image->image_title }}" data-title="{{ $article_block_image->title }}">
              <img src="{{ $article_block_image->main_image }}" alt="{{ $article_block_image->image_alt }}" title="{{ $article_block_image->image_title }}" data-title="{{ $article_block_image->title }}">
            </picture>
          </div>
        @endforeach 
      @endif
      <div class="img-to-select">
        @if($articleBlockImagesCount > 1)
          @if(!empty($article_block_images)) 
            @foreach($article_block_images as $article_block_image)
              <div @if($loop->first) class="img-to-select__item  selected" @else class="img-to-select__item" @endif>
                <img src="{{ $article_block_image->preview_image }}" alt="{{ $article_block_image->image_alt }}" title="{{ $article_block_image->image_title }}" data-title="{{ $article_block_image->title }}" data-main-src="{{ $article_block_image->main_image }}" data-mobile-src="{{ $article_block_image->mobile_image }}">
              </div>
            @endforeach 
          @endif
        @endif
      </div>
    </div>
  </div>
</div>

$('.img-to-select__item').click(function () {
  $('.img-to-select__item').removeClass('selected');
  $(this).addClass('selected');
  let index = $(this).index();
  $('.main-image').hide();
  $('.main-image').eq(index).show();
  $('.custom-carousel__title > span').html($(this).children('img').attr('data-title'));
});

It works when there is only one such slider on the page, here is an example

https://jsfiddle.net/a9yvdu75/

Here the code is slightly different from mine, but in general the principle is the same

When there are two sliders on the page, then everything does not work correctly, here is an example

https://jsfiddle.net/9std8k3u/

How can this be fixed?

I tried this

$('.img-to-select__item').click(function () {
  let currentSelection = $(this);

  $('.img-to-select__item').removeClass('selected');
  $(currentSelection).addClass('selected');
  let index = $(currentSelection).index();
  $(currentSelection).closest('.img-to-select').prevAll('.main-image').hide();
  $(currentSelection).closest('.img-to-select').prevAll('.main-image').eq(index).show();
  $(currentSelection).closest('.img-to-select').prevAll('.custom-carousel__title > span').find('span').html($(currentSelection).children('img').attr('data-title'));
});

Everything seems to work, but when you select a preview picture, the main one displays not the one you need, but the neighboring one

Answer 1

You need to get elements from your clicked element with $(this).

https://api.jquery.com/closest/

https://api.jquery.com/prevall/

 $('.img-to-select__item').click(function () { let currentSelection = $(this); let imgToSelect = $(currentSelection).closest('.img-to-select'); let imgURL = $(currentSelection).find('img').attr('src'); let imgTitle = $(currentSelection).find('img').attr('data-title'); $('.img-to-select__item').removeClass('selected'); $(currentSelection).addClass('selected'); $(imgToSelect).prevAll('.main-image').find('img').attr('src', imgURL); $(imgToSelect).prevAll('.custom-carousel__title').find('span').html(imgTitle); // debug infos //console.clear(); //console.log(imgURL); //console.log(imgTitle); });

 .custom-carousel { text-align: center; }.main-image > img { width:50px; }.img-to-select >.img-to-select__item > img { height:30px; width: 30px; }.img-to-select { overflow: hidden; display: flex; justify-content:space-around; }.img-to-select >.img-to-select__item { display: flex; justify-content:space-around; }.img-to-select >.img-to-select__item.selected { border: 2px }

 <div class="custom-carousel-section"> <div class="custom-container"> <div class="custom-carousel"> <div class="custom-carousel__title"> <span>Title </span> </div> <div class="main-image"> <img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" alt="" data-title="image-a"> </div> <div class="img-to-select"> <div class="img-to-select__item selected"> <img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" alt="" data-title="image-a"> </div> <div class="img-to-select__item"> <img src="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" alt="" data-title="image-b"> </div> <div class="img-to-select__item"> <img src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" alt="" data-title="image-c"> </div> <div class="img-to-select__item"> <img src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" alt="" data-title="image-d"> </div> </div> </div> </div> </div> <div class="custom-carousel-section"> <div class="custom-container"> <div class="custom-carousel"> <div class="custom-carousel__title"> <span>Title </span> </div> <div class="main-image"> <img src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U" alt="" data-title="image-e"> </div> <div class="img-to-select"> <div class="img-to-select__item selected"> <img src="hhttps://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U" alt="" data-title="image-e"> </div> <div class="img-to-select__item"> <img src="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" alt="" data-title="image-f"> </div> <div class="img-to-select__item"> <img src="https://i.picsum.photos/id/67/200/300.jpg?grayscale&hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" alt="" data-title="image-g"> </div> <div class="img-to-select__item"> <img src="https://i.picsum.photos/id/870/200/300.jpg?blur=2&grayscale&hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" alt="" data-title="image-h"> </div> </div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>