swiperの複数設置の件で

Question

お世話になります。

https://b-risk.jp/blog/2022/04/swiper/#08
こちらの「サムネイル（非スライダー）を付けて連動」を同ページ内に複数設置したいのですが、

const thumb = document.querySelectorAll('.gallery02 .thumb-media');

  const switchThumb = (index) => {
    document.querySelector('.gallery02 .thumb-media-active').classList.remove('thumb-media-active');
    thumb[index].classList.add('thumb-media-active');
  }

  const mySwiper = new Swiper('.gallery02 .swiper', {
    effect: 'fade',
    fadeEffect: {
      crossFade: true,
    },
    speed: 500,
    navigation: {
      nextEl: '.gallery02 .swiper-button-next',
      prevEl: '.gallery02 .swiper-button-prev',
    },
    on: {
      afterInit: (swiper) => {
        thumb[swiper.realIndex].classList.add('thumb-media-active');
        for (let i = 0; i < thumb.length; i++) {
          thumb[i].onclick = () => {
            swiper.slideTo(i);
          };
        }
      },
      slideChange: (swiper) => {
        switchThumb(swiper.realIndex);
      },
    }
  });

このコードをどう編集してやれば、いいでしょうか？
同じものをコピペして、コピペしたものへいろいろ数字を振ってやってもうまくいかないもので。

ご回答いただけますと、助かります。
よろしくお願いいたします。

Answer 1

CODEMAN 様

ご回答、ありがとうございました。
お知らせいただきました方法で、試行錯誤してみます。

Answer 2

.gallery02（セレクタ）
thumb（変数）
switchThumb（変数）
mySwiper（変数）
コピー元と重複しないよう、数字を振るなりして該当箇所をすべて書き換えればよいです

わかっているかとは思いますけど
変更したクラス名に応じて、複製したhtml cssにも手を加える必要があります