eachでサムネイルの連番を、各スライドで0から連番をつけたい。

Question

前提・実現したいこと

eachでサムネイルの連番（index番号）を、各スライドで0から連番をつけたいです。
スライドが1つの場合はうまくいくのですが、
htmlを複製して2つ以上スライドを作成した場合、
各スライドで連番がリセットされず、
index番号（data-index）が5,6,7,8・・・と続きの番号がついてしまいます。

これを各スライドで、サムネイルに0,1,2,3・・・と0から付与したいです。

該当のソースコード

詳細な実装内容ですが、
slickでサムネイル付きのスライド実装をしたいと思っています。
htmlとjavascriptを以下の記述で作成しました。
htmlの記述変更はなしで、
このまま複製しても、javascriptが機能するようにしたいです。

<!--1つのスライド-->
<div class="product-slide">
  <!--メインスライド-->
  <ul class="slide-main">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <!--/メインスライド-->
  <!--サムネイルスライド-->
  <ul class="slide-thumbnail">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <!--/サムネイルスライド-->
</div>
<!--/1つのスライド-->

  $(function() {
    // slide（サムネイルつき）---------------------
    // 参考サイト：https://takblog.site/web/?p=144
    var sliderBox = ".product-slide";
    var slider = ".slide-main"; //スライダー
    var thumbnailItem = ".slide-thumbnail li"; //サムネイル画像
    //サムネイル画像アイテムに data-index　でindex番号を付与
      $(thumbnailItem).each(function() {
        var index = $(thumbnailItem).index(this);
        $(this).attr("data-index", index);
      });
    //スライダー初期化後、カレントのサムネイル画像にクラス「thumbnail-current」を付ける
    //「slickスライダー作成」の前にこの記述は書いてください。
    $(slider).on("init", function(slick) {
      var index = $(".slide-item.slick-slide.slick-current").attr(
        "data-slick-index"
      );
      $(thumbnailItem + '[data-index="' + index + '"]').addClass(
        "thumbnail-current"
      );
    });
    //slickスライダー初期化
    $(".slide-main").slick({
      arrows: true,
      dots: true,
      fade: true,
      infinite: false //これは必須
    });
    //サムネイル画像アイテムをクリックした時にスライダー切り替え
    $(thumbnailItem).on("click", function() {
      var index = $(this).attr("data-index");
      $(slider).slick("slickGoTo", index, false);
    });
    //サムネイル画像のカレントを切り替え
    $(slider).on("beforeChange", function(
      event,
      slick,
      currentSlide,
      nextSlide
    ) {
      $(thumbnailItem).each(function() {
        $(this).removeClass("thumbnail-current");
      });
      $(thumbnailItem + '[data-index="' + nextSlide + '"]').addClass(
        "thumbnail-current"
      );
    });
  });

試したこと

$(this)を使うと解決すると思っているのですが、
うまく使えず、解決できない状態です。
javascriptの記述でアドバイスいただきたいです。
「サムネイル画像アイテムに data-index　でindex番号を付与する」ところで、
以下のように指定してみましたが、data-index自体が付与されなくなってしまいました。

    //サムネイル画像アイテムに data-index　でindex番号を付与
    $(sliderBox).each(function() {
      $(sliderBox)
        .find(thumbnailItem)
        .each(function() {
          var index = $(sliderBox)
            .find(thumbnailItem)
            .index(this);
          $(this)
            .find(thumbnailItem)
            .attr("data-index", index);
        });
    });

以上となります。お手数おかけしますが、よろしくお願いします。

コメントいただいてから試してみたこと

yambejp様にご教示いただいた方法で
思うようにdata-indexの連番を付けることができました！
しかし、スライドとサムネイルのクラス名が同じだと、
複数増やした状態で、サムネイルをクリックしたら、同時にスライドが動いてしまうことに気付きました。。。
なので、スライドとサムネイルのクラス名を変更する方法で実装を考え直しています。

そこで、javascriptの記述をスライダーの数だけ複製し、
スライダーとサムネイル画像の部分を、
下記のように、変数と中に入れるクラス名を手動で変更したら、うまく起動しました。

    var slider = ".main0"; //スライダー
    var thumbnailItem = ".slide-thumbnail0 li"; //サムネイル画像

    var slider1 = ".main1"; //スライダー
    var thumbnailItem1 = ".slide-thumbnail1 li"; //サムネイル画像

これをfor文を使って動的に変数とクラスの番号を変更したいのですが、うまくいきません。。。
下記のように、クラスの番号を動的に変更するようにしたのですが、
スライドが複数ある場合、
どのサムネイルをクリックしても、一番下のスライドが反応してしまいます。

  $(function() {
    // slide（サムネイルつき）---------------------
    // 参考サイト：https://takblog.site/web/?p=144

    //【追加】スライドの数を数え、その数だけ個別のクラスを付与する
    var classLength = $(".product-slide").length;
    var newClassMain, newClassThumbnail, slider, thumbnailItem;
    //【追加】サムネイル画像アイテムに data-index　でindex番号を付与
    for (var i = 0; classLength > i; i++) {
      newClassMain = "main" + i;
      newClassThumbnail = "thumbnail" + i;
      slider = "." + newClassMain;
      thumbnailItem = "." + newClassThumbnail + " " + "li";
      $(".slide-main")
        .eq(i)
        .addClass(newClassMain);
      $(".slide-thumbnail")
        .eq(i)
        .addClass(newClassThumbnail);
      //サムネイル画像アイテムに data-index　でindex番号を付与
      $(thumbnailItem).each(function() {
        var index = $(thumbnailItem).index(this);
        $(this).attr("data-index", index);
      });
      //スライダー初期化後、カレントのサムネイル画像にクラス「thumbnail-current」を付ける
      //「slickスライダー作成」の前にこの記述は書いてください。
      $(slider).on("init", function(slick) {
        var index = $(".slide-item.slick-slide.slick-current").attr(
          "data-slick-index"
        );
        $(thumbnailItem + '[data-index="' + index + '"]').addClass(
          "thumbnail-current"
        );
      });
      //slickスライダー初期化
      $(slider).slick({
        arrows: true,
        dots: true,
        fade: true,
        infinite: false //これは必須
      });
      //サムネイル画像アイテムをクリックした時にスライダー切り替え
      $(thumbnailItem).on("click", function() {
        var index = $(this).attr("data-index");
        $(slider).slick("slickGoTo", index, false);
      });
      //サムネイル画像のカレントを切り替え
      $(slider).on("beforeChange", function(
        event,
        slick,
        currentSlide,
        nextSlide
      ) {
        $(thumbnailItem).each(function() {
          $(this).removeClass("thumbnail-current");
        });
        $(thumbnailItem + '[data-index="' + nextSlide + '"]').addClass(
          "thumbnail-current"
        );
      });
    }
  }

そのため、変数名も変更する必要があると考えています。
しかし、slider[i],thumbnailItem[i] ではうまくいきませんでした。。

長文で申し訳ありません。
どうかお力をお借りできれば嬉しいです。
よろしくお願い申し上げます。

Answer 1

想定する最終形が見えないのでなんとも言えませんがこんな感じですか？

$(function(){
  $('.product-slide li').attr("data-index",function(){
    return $(this).closest('ul').find('li').index(this);
  });
});

Comments

[navbisuu]

yambejp様
ご教示ありがとうございます！
その方法で思うようにdata-indexの連番を付けることができました！
しかし、スライドとサムネイルのクラス名が同じだと、
複数増やした状態で、サムネイルをクリックしたら、同時にスライドが動いてしまうことに気付きました。。。
なので、スライドとサムネイルのクラス名を変更する方法で実装を考え直しています。

【追記】
コードを書いたら長くなってしまいましたので、
本文に、「コメントいただいてから試してみたこと」に
ご教示後の試行錯誤内容を追記しました。
そちらをご確認いただき、コメントいただけると大変有難いです！

お手数おかけしますが、よろしくお願い申し上げます。

[navbisuu]

yambejs様
すみません、このスライドの問題は、別の方法で解決したのですが、
表題の質問にはこのご回答内容で解決しましたので、ベストアンサーにしました。
jQueryの新たな知識を増やすことができました。
本当にありがとうございました！

スライド問題の解決方法は、こちらの質問ページで解決しました。
https://teratail.com/questions/298792