Как правильно вызвать событие change для конкретного поля?

Question

[Владимир]

Добрый день, подскажите как корректно вызвать change событие, дано страница каталог товаров, на ней разное количество товаров.

Пример одно позиции товара, на странице их разное количество.

<div class="item">
        <div class="product-content">
          <div class="product-content-inner">
            <h5 class="product-name">
              <a href="#">Название товара</a>
            </h5>
            <hr>
            <div class="price-box">
              <table class="table small table-borderless">
                <tbody><tr>
                  <td class="text-center">
                    <span id="product-price-12-new" class="regular-price">
                      <span class="price">0,45<i class="fa fa-ruble" aria-hidden="true"></i> руб. шт.
												</span>
                    </span>
                  </td>
                  <td class="text-center">
                    <div class="quantity" style="margin-bottom: 0px;">
                      <span class="qty-wrapper" style="padding-top:0px;">
                        <span class="qty-inner">
                          <input data-id="204" data-quantity="3500" min="0" data-price-item="0.45" id="quantity" class="item-quantity form-control form-control-sm" type="number" value="3500" step="3500" name="quantity">
                        </span>
                      </span>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td class="text-center">
                    <p class="small" id="price_in_col204">
                      <span></span>
                    </p>
                  </td>
                  <td class="text-center" id="btn204">
                    <a href="/produkciya/cart/?add=204" onclick="return $.addIntoCart('/produkciya/cart/', 204, 3500)" class="btn btn-light btn-sm">В корзину</a>
                  </td>
                </tr>
              </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

У каждого товара есть поле где указано количество и есть цена за штуку, товар продается не поштучно.

Хочу сделать чтобы при изменении количества рядом показывало стоимость - цена за шт * на количество.

Написал вот такой код, но он выполняется только для первого товара с #quantity как правильно вызвать change function() из input который изменился?

$("#quantity").on("change", function() {
		let _id = '#price_in_col' + $(this).attr("data-id");
		let _idbtn = '#btn' + $(this).attr("data-id");
		let _quantity = parseFloat($(this).val());
		let _price = parseFloat($(this).attr("data-price-item"));
		let itogo = _quantity * _price;
		$(_id).text("Итого: " + itogo + " руб.");
		$(_idbtn).html('<a href="/produkciya/cart/?add=' + $(this).attr("data-id") + '" onclick="return $.addIntoCart(\'/produkciya/cart/\', ' + $(this).attr('data-id') + ', '+ _quantity +')\" class=\"btn btn-light btn-sm\">В корзину</a>');			
	});

Answer 1

[Пашенька]

1. У товаров не должен быть одинаковый id="quantity".
2.

document.querySelectorAll('[name="quantity"]').forEach(function(item) {
   item.onchange = function() {
      // делаете тут, что хотите
      // this - input, который изменился
   }
});

Comments

[Пашенька]

Pardon Me! Where Do I Find 4giveness?, я вкурсе) Но тут вообще джейквери, так что в данном контексте мой перфекционизм решает, что и так пойдёт.

[Владимир]

Спасибо, понял.