サムネイルを押すと切り替わるメイン画像にライトボックスを適応したい

前提・実現したいこと

サムネイルを押すと切り替わるメイン画像にライトボックスを適応しているコンテンツについて、
同じページ内に複数同一のコンテンツを追加したいのですが、
サムネイルをクリックすると他の同コンテンツのメイン画像が消え、サムネイルだけが残る形になってしまいます。

サムネイルをクリックしたギャラリー

上記の下に追加したコンテンツの状態

なるべくhtmlとcssを組みなおさずに上記の状態を解消する方法があればご教授いただきたいです。

発生している問題・エラーメッセージ

サムネイルを押すと切り替わるメイン画像にライトボックスを適応しているコンテンツを動的化して
CMSで更新できる仕様に変えるらしいのですが、そのまま同ページにそのコンテンツを追加すると、
他のメイン画像が消えサムネイル画像だけが残ってしまいます。

該当のソースコード

html
1                    <ul class="mainImages">
2
3                    <li class="mainImages__item">
4                      <a href="./img/photo01_1.jpg" data-lightbox="lightbox"><img src="./img/photo01_1.jpg" alt=""></a>
5                    </li>
6                    <li class="mainImages__item is-visible">
7                      <a href="./img/photo02_1.jpg" data-lightbox="lightbox"><img src="./img/photo01_2.jpg" alt=""></a>
8                    </li>
9                    <li class="mainImages__item">
10                      <a href="./img/photo03_1.jpg" data-lightbox="lightbox"><img src="./img/photo03_1.jpg" alt=""></a>
11                    </li>
12                   </ul>
13                        <ul class="thumnail clearfix">
14                          <li class="thumbnails__item"><img src="./img/photo01_1.jpg" alt="" class="object-fit"></li>
15                          <li class="thumbnails__item"><img src="./img/photo02_1.jpg" alt="" class="object-fit"></li> 
16                          <li class="thumbnails__item"><img src="./img/photo03_1.jpg" alt="" class="object-fit"></li>                        
17                      </ul>

CSS
1.thumbnails__item{
2	float: left;
3	transition-property: opacity;
4    transition-duration: 0.3s;
5    transition-timing-function: ease-in-out;
6	width: 32%;
7	margin-right: 2%;
8}
9.object-fit{
10  width: 110px;
11  height: 80px;
12  object-fit: cover;
13  font-family: 'object-fit: cover;'
14}
15
16.thumbnails__item:nth-child(3n){
17	margin-right: 0;
18}
19.mainImages__item {
20	display: none;
21}
22.mainImages__item.is-visible {
23    display: block;
24}

JS
1$(function () {
2  $('.thumbnails__item').on('click', function () {
3    const index = $('.thumbnails__item').index(this);
4
5    $('.mainImages__item').removeClass('is-visible');
6    $('.mainImages__item').eq(index).addClass('is-visible');
7  })
8})
9

試したこと

class名を変えるなど検討しましたが、これからコンテンツが追加されていくので現実的ではないと思い、断念しました。
また、srcを書き換えるjsに組みなおすなど試みましたが、上手くライトボックスが適応されませんでした。

乱文失礼いたしました。
何卒よろしくお願いいたします。

行動規範の内容に同意します

回答1件

こんばんは。

コンテキストを使ってみてはいかがでしょうか。
つまり、

html
1<section>
2    <ul class="mainImages">
3    <!-- ... -->
4    </ul>
5    <ul class="thumnail clearfix">
6    <!-- ... -->
7    </ul>
8</section>

などとラップして、

js
1$('section').each(function(i,e){
2    $('.thumbnails__item', e).on('click', function () {
3        const index = $('.thumbnails__item', e).index(this);
4    
5        $('.mainImages__item', e).removeClass('is-visible');
6        $('.mainImages__item', e).eq(index).addClass('is-visible');
7    })
8});