Проблема с JavaScript при сравнении введенных значений

Оффтоп javascript
1

Привет, ребята! У меня возникла проблема с кодом на JavaScript. Я пытаюсь сравнить значения в таблице, но что-то идет не так.

Вот часть моего кода:

while($row = $results->fetch_array()) {
  echo '<td><input type="text" name="остаток[]" value="' . $row['количество'] . '" class="форма-контроль" id="остаток_товара" disabled></td>';
  echo '<td><input type="text" name="проверка[]" value="" class="форма-контроль" id="проверка_количества" maxlength="7"></td>';
}

А вот мой JavaScript:

document.getElementById('проверка_количества').addEventListener('input', проверкаКоличества);

function проверкаКоличества(e) {
  var проверяемое = +document.getElementById('проверка_количества').value;
  var остаток = +document.getElementById('остаток_товара').value;

  if (проверяемое > остаток) {
    console.log('Ошибка');
    document.getElementById('проверка_количества').value = 0;
  }
}

Проблема в том, что это работает только для первой строки таблицы. Для второй и последующих строк функция не срабатывает. Как это можно исправить? Буду благодарен за любую помощь!

2

Проблема в том, что ты используешь id для элементов в цикле. Это создает дубликаты id, что неправильно. Лучше использовать классы вместо id. Потом можно выбрать все элементы с нужным классом и добавить обработчики событий в цикле. Например:

document.querySelectorAll('.проверка_количества').forEach(el => {
  el.addEventListener('input', проверкаКоличества);
});

Так же нужно будет изменить функцию проверкаКоличества, чтобы она работала с текущим элементом, а не искала по id.

3

Проблема в том, что используются одинаковые id для нескольких элементов, что вызывает ошибки. Лучше заменить id на классы и использовать querySelectorAll для выбора нужных элементов. В итоге можно добавить обработчики событий через цикл, например:

document.querySelectorAll('.проверка_количества').forEach((el, index) => {
  el.addEventListener('input', (e) => проверкаКоличества(e, index));
});

function проверкаКоличества(e, index) {
  let проверяемое = +e.target.value;
  let остаток = +document.querySelectorAll('.остаток_товара')[index].value;
  // остальной код
}

Такой подход решает проблему с дублированием идентификаторов.