Laravel foreach循环中jQuery点击事件干扰其他循环项的问题

循环生成的商品数量控件，点击某一项的+/-按钮时，其他项的按钮状态也会被改变。尝试过用.eq()、.index()方法，还把id选择器改成了class选择器，但问题依然存在，请问哪里操作有误？

循环生成的Blade模板代码 #

@foreach ($keranjang as $row)
      <table class="table table-bordered" style="border-width:6px">
          <thead class="thead-dark">
            <tr>
             ...
            </tr>
          </thead>
          <tbody>
            <tr>
             ...
              <td>
                <button onclick="this.parentNode.querySelector('#qty').stepDown()" class="min-btn" style="width: 20px">-</button>
                <input readonly class="qty" id="qty" style="width: 30px; text-align:center" type="number" 
                name="qty" value="{{$row->qty}}">
                <button onclick="this.parentNode.querySelector('#qty').stepUp()" class="plus-btn" style="width: 20px">+</button>
              </td>
              ...
            </tr>
          </tbody>
      </table>             
@endforeach

原jQuery代码 #

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>
  $(document).ready(function() {
    $('.qty').attr('min',1);
    $('.qty').attr('max',5);

      $('.min-btn').on('click', function() {
        $('.plus-btn').attr('disabled', false);
         if ($('.qty').val() == 1) 
         {
          $(this).attr('disabled', true);
         }
      });

      $('.plus-btn').on('click', function() {
        $('.min-btn').attr('disabled', false);
         if ($('.qty').val() == 5) 
         {
          $(this).attr('disabled', true);
         }   
      });
  });
</script>

问题根源 #

1. 重复的ID属性：循环里的input保留了id="qty"，而HTML中id必须唯一，导致querySelector('#qty')永远只会选中页面中第一个带有该id的元素，点击按钮时实际操作的是第一行的数量框，而非当前行。
2. 全局选择器操作所有元素：jQuery代码中$('.plus-btn').attr('disabled', false)和$('.qty').val()都是选择页面中所有对应class的元素，会把所有加号按钮启用，或者取第一个数量框的值，自然会影响所有行的状态。

修复方案 #

1. 修正循环模板代码

去掉input的重复id，修改按钮的onclick事件，通过class选择当前行的数量框：

@foreach ($keranjang as $row)
      <table class="table table-bordered" style="border-width:6px">
          <thead class="thead-dark">
            <tr>
             ...
            </tr>
          </thead>
          <tbody>
            <tr>
             ...
              <td>
                <button onclick="this.parentNode.querySelector('.qty').stepDown()" class="min-btn" style="width: 20px">-</button>
                <input readonly class="qty" style="width: 30px; text-align:center" type="number" 
                name="qty" value="{{$row->qty}}">
                <button onclick="this.parentNode.querySelector('.qty').stepUp()" class="plus-btn" style="width: 20px">+</button>
              </td>
              ...
            </tr>
          </tbody>
      </table>             
@endforeach

2. 修正jQuery事件逻辑

通过$(this)定位当前点击的按钮，再用siblings()找到同层级的数量框，只操作当前行的元素：

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>
  $(document).ready(function() {
    $('.qty').attr('min',1);
    $('.qty').attr('max',5);

      $('.min-btn').on('click', function() {
        // 仅启用当前行的加号按钮
        $(this).siblings('.plus-btn').attr('disabled', false);
        // 获取当前行的数量值
        const currentQty = $(this).siblings('.qty').val();
         if (currentQty == 1) 
         {
          $(this).attr('disabled', true);
         }
      });

      $('.plus-btn').on('click', function() {
        // 仅启用当前行的减号按钮
        $(this).siblings('.min-btn').attr('disabled', false);
        // 获取当前行的数量值
        const currentQty = $(this).siblings('.qty').val();
         if (currentQty == 5) 
         {
          $(this).attr('disabled', true);
         }   
      });
  });
</script>

补充说明 #

之前尝试的.eq()、.index()没生效，大概率是没正确关联按钮和对应行的数量框。修复后的逻辑通过DOM层级关系（兄弟元素）精准定位当前行的控件，从根本上避免了操作全局元素的问题。

内容的提问来源于stack exchange，提问作者Januar