swiperの同ページ内複数設置の件で

お世話になります。

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);
      },
    }
  });

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

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