jQuery - Click and enable Button without affecting other foreach Laravel arrays

Question

Based on this video, why the click event affecting the other index of arrays ? I've trying to use .eq() , .index() and change the id to class selector, but how ? Maybe i'm doing some mistake ?

Foreach :

@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>

Answer 1

$('.plus-btn') $('.qty') these selectors are targeting multiple DOM elements this is probably not what you want. You want to scope it and target the local plus and minus buttons.

 $(document).ready(function() {
    $('.qty').attr('min',1);
    $('.qty').attr('max',5);

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

      $('.plus-btn').on('click', function() {
        const $this = $(this);
        const $td = $this.closest("td");
        const $input = $td.find('.qty');
        
        $td.find('.min-btn').attr('disabled', false);
        
        if($input.val() == 5){
          $this.attr('disabled', true);          
        }

      });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

 <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="0">
                <button onclick="this.parentNode.querySelector('#qty').stepUp()" class="plus-btn" style="width: 20px">+</button>
              </td>

              <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="1">
                <button onclick="this.parentNode.querySelector('#qty').stepUp()" class="plus-btn" style="width: 20px">+</button>
              </td>

              ...
            </tr>
          </tbody>
      </table>