Как изменить значение в нескольких текстовых полях с определенной кнопки c для каждой с одинаковым именем класса в сценарии java?

Question

Я хочу создать корзину для электронной торговли, в которой количество увеличивается или уменьшается с помощью кнопки, поскольку в корзине есть несколько элементов, поэтому несколько текстовых полей и кнопок имеют одно и то же имя класса. Для тестирования я создал 5 текстовых полей с кнопками, одно для увеличения, а другое для уменьшения. Когда я нажимаю любую кнопку, они меняются только

var dec = document.getElementsByClassName("dec_button");
var inc = document.getElementsByClassName("inc_button");
var x = document.getElementsByClassName("num");

for (var i = 0; i <= 3; i++) {
  dec[i].addEventListener("click", Dec);
  inc[i].addEventListener("click", Inc);

  function Dec() {
    x[i].value -= 1;
  }

  function Inc() {
    x[i].value = +x[i].value + 1;
  }
}

<input type="button" class="dec_button" value="-">
<input type="text" value="0" class="num">
<input type="button" class="inc_button" value="+">
<br>
<hr>
<input type="button" class="dec_button" value="-">
<input type="text" value="0" class="num">
<input type="button" class="inc_button" value="+">
<br>
<hr>
<input type="button" class="dec_button" value="-">
<input type="text" value="0" class="num">
<input type="button" class="inc_button" value="+">
<br>
<hr>
<input type="button" class="dec_button" value="-">
<input type="text" value="0" class="num">
<input type="button" class="inc_button" value="+">
<br>
<hr>
<input type="button" class="dec_button" value="-">
<input type="text" value="0" class="num">
<input type="button" class="inc_button" value="+">
<br>
<hr>

Answer 1

Вместо того, чтобы обращаться к элементам по индексу в l oop, что может привести к проблемам с закрытием, обходите DOM в каждом событии щелчка, чтобы найти связанный input, значение которого следует изменить. Попробуйте это:

var dec = document.getElementsByClassName("dec_button");
var inc = document.getElementsByClassName("inc_button");
var x = document.getElementsByClassName("num");

for (var i = 0; i <= 1; i++) {
  dec[i].addEventListener("click", function() {
    this.nextElementSibling.value = parseInt(this.nextElementSibling.value, 10) - 1;
  });
  inc[i].addEventListener("click", function() {
    this.previousElementSibling.value = parseInt(this.previousElementSibling.value, 10) + 1;
  });
}

<input type="button" class="dec_button" value="-">
<input type="text" value="0" class="num">
<input type="button" class="inc_button" value="+">
<br>
<hr>
<input type="button" class="dec_button" value="-">
<input type="text" value="0" class="num">
<input type="button" class="inc_button" value="+">
<br>
<hr>

Вот то же самое в jQuery:

$('.dec_button').on('click', function() {
  $(this).next().val((i, v) => parseInt(v, 10) - 1)
});

$('.inc_button').on('click', function() {
  $(this).prev().val((i, v) => parseInt(v, 10) + 1)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" class="dec_button" value="-">
<input type="text" value="0" class="num">
<input type="button" class="inc_button" value="+">
<br>
<hr>
<input type="button" class="dec_button" value="-">
<input type="text" value="0" class="num">
<input type="button" class="inc_button" value="+">
<br>
<hr>