【jQuery】プラスマイナスのボタンを商品ごとに動くようにしたい。

Question

お世話になります。
ショッピングサイトで数量カウンターを作っているのですが、
一つの商品のプラスを押すと他の商品まで連動してしまい困っております。
商品ごとにプラスマイナスボタンを動かしたいです。
.btnspinnerが同じだからだと思うのですが、
thisで個別に認識したいのですが、なかなかうまくいきません。
アドバイスいただけると幸いです。宜しくお願い致します。

実際の動き
https://codepen.io/moge_penguin/pen/abqxYMy

ul
  li.one
    div.ImageMain.ImageMain_s
      div.Detail
          p.s_title りんご
          p.s_price ¥100
          form(name="form2")
            div(class="spinner_area")
              input.count(type="number",name="りんご", value="1", data-max="100", data-min="1")
              input.btnspinner(type="button", value="＋", data-cal="1", data-target=".count")
              input.btnspinner(type="button", value="－", data-cal="-1",data-target=".count")
          button.item_cart_btn.js_cart_btn(data-name="りんご" data-price="100") カートに入れる
          button.item_heart_btn.js_heart_btn(data-name="りんご" data-price="100") お気に入り登録
      li.two
        div.Detail
          p.s_title にんじん
          p.s_price ¥120
          form(name="form2")
            div(class="spinner_area")
              input.count(type="number",name="にんじん", value="1", data-max="100", data-min="1")
              input.btnspinner(type="button", value="＋", data-cal="1", data-target=".count")
              input.btnspinner(type="button", value="－", data-cal="-1", data-target=".count")
          button.item_cart_btn.js_cart_btn(data-name="にんじん" data-price="120") カートに入れる
          button.item_heart_btn.js_heart_btn(data-name="にんじん" data-price="120") お気に入り登録

$(function(){
  let arySpinnerCtrl = [];
  let spin_speed = 20; //変動スピード
  
  //長押し押下時
  $(' .btnspinner').on('click', function(e){
      if(arySpinnerCtrl['interval']) return false;
      let target = $(this).data('target');
      arySpinnerCtrl['target'] = target;
      arySpinnerCtrl['timestamp'] = e.timeStamp;
      arySpinnerCtrl['cal'] = Number($(this).data('cal'));
      //クリックは単一の処理に留める
      if(e.type == 'click'){
          spinnerCal();
          arySpinnerCtrl = [];
          return false;
      }
      //長押し時の処理
      setTimeout(function(){
          //インターバル未実行中 + 長押しのイベントタイプスタンプ一致時に計算処理
          if(!arySpinnerCtrl['interval'] && arySpinnerCtrl['timestamp'] == e.timeStamp){
              arySpinnerCtrl['interval'] = setInterval(spinnerCal, spin_speed);
          }
      }, 500);
  });
  
  //長押し解除時 画面スクロールも解除に含む
  $(document).on('touchend mouseup scroll', function(e){
      if(arySpinnerCtrl['interval']){
          clearInterval(arySpinnerCtrl['interval']);
          arySpinnerCtrl = [];
      }
  });
  
  //変動計算関数
  function spinnerCal(){
      let target = $(arySpinnerCtrl['target']);
      let num = Number(target.val());
      num = num + arySpinnerCtrl['cal'];
      if(num > Number(target.data('max'))){
          target.val(Number(target.data('max')));
      }else if(Number(target.data('min')) > num){
          target.val(Number(target.data('min')));
      }else{
          target.val(num);
      }
  }
  
});

Answer 1

  function spinnerCal(){
      let target = $(arySpinnerCtrl['target']);

どのスピンボタンが押されてもここでは $('.count') が実行されるので、ページ中のすべての class="count" が対象になってしまいます。

      let target = $(this).data('target');
      arySpinnerCtrl['target'] = target;

ここで対象のクラス名を入れるのではなく、対象の要素そのものを入れた方がよいでしょう。arySpinnerCtrl['target'] = this.parentNode.querySelector(target); のような感じでしょうか。

Comments

[KAZUHA]

ご回答・解説していただきありがとうございます！
this.parentNode.querySelectorでその対象の要素を選択できることを知らなかったので
大変勉強になりました(^^)
解決いたしました、ありがとうございます！