Изменение значения только с одного конкретного значения

Question

У меня есть группа сгенерированных входов с задачей добавления товаров в список магазинов и добавления значения в ключ sessionStorage:

$('.increment').click(function increment() {
  $('.quantity-input').val(function(i, oldval) {
    return parseInt(oldval, 10) + 1;
  });
});


$('.drecement').click(function increment() {
  $('.quantity-input').val(function(i, oldval) {
    return parseInt(oldval, 10) - 1;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="counter-container">
  <input class="quantity-input" id=" 
       <?php echo $id_produtos; ?>" type="text" value="1">
  <div class="btn-container">
    <button id="<?php echo $id_produtos; ?>" class="btn-arrow 
        increment">▲</button>
    <button id="<?php echo $id_produtos; ?>" class="btn-arrow 
        drecement">▼</button>
  </div>
</div>

<div class="counter-container">
  <input class="quantity-input" id=" 
       <?php echo $id_produtos; ?>" type="text" value="1">
  <div class="btn-container">
    <button id="<?php echo $id_produtos; ?>" class="btn-arrow 
        increment">▲</button>
    <button id="<?php echo $id_produtos; ?>" class="btn-arrow 
        drecement">▼</button>
  </div>
</div>

Проблема в том, что я изменяю и другие сгенерированные входные данные:

Как я могу ТОЛЬКО изменить ввод, который я нажимаю?

Answer 1

Вам нужно использовать $(this), чтобы обратиться к связанному входу, поднявшись к родительскому элементу div, используя .closest('.counter-container'), затем выберите нужный вход, используя .find('.quantity-input'), например:

$(this).closest('.counter-container').find('.quantity-input').val(...

$('.increment').click(function increment() {
  $(this).closest('.counter-container').find('.quantity-input').val(function(i, oldval) {
    return parseInt(oldval, 10) + 1;
  });
});


$('.drecement').click(function increment() {
  $(this).closest('.counter-container').find('.quantity-input').val(function(i, oldval) {
    return parseInt(oldval, 10) - 1;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="counter-container">
  <input class="quantity-input" id="x_1" type="text" value="1">
  <div class="btn-container">
    <button id="1" class="btn-arrow increment">▲</button>
    <button id="1" class="btn-arrow drecement">▼</button>
  </div>
</div>

<div class="counter-container">
  <input class="quantity-input" id="x_2" type="text" value="1">
  <div class="btn-container">
    <button id="y_2" class="btn-arrow increment">▲</button>
    <button id="z_2" class="btn-arrow drecement">▼</button>
  </div>
</div>

<div class="counter-container">
  <input class="quantity-input" id="x_3" type="text" value="1">
  <div class="btn-container">
    <button id="y_3" class="btn-arrow increment">▲</button>
    <button id="z_3" class="btn-arrow drecement">▼</button>
  </div>
</div>