Первый элемент выполняет свою функцию на отлично, но следующее элементы не хотят выполнять js. Пробовал добавить querySelectorAll, но это не помогло, что я делаю не так?
<html lang="ru" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="">
<h5>Первый элемент</h5>
<input class="quantity" type="number" min="1" max="99" value="1" title="Количество" inputmode="numeric">
<span class="price-amount">888</span>
</div>
<div class="">
<h5>Второй элемент</h5>
<input class="quantity" type="number" min="1" max="99" value="1" title="Количество" inputmode="numeric">
<span class="price-amount">888</span>
</div>
<div class="">
<h5>Третий элемент</h5>
<input class="quantity" type="number" min="1" max="99" value="1" title="Количество" inputmode="numeric">
<span class="price-amount">888</span>
</div>
<script src="script.js"></script>
</body>
</html>
let qty = document.querySelector('.quantity');
let amount = document.querySelector('.price-amount').firstChild;
let price = +amount.textContent;
qty.addEventListener('input', () => amount.textContent = qty.value*price);
$(function() {
(function quantityProducts() {
var $quantityArrowMinus = $(".quantity-arrow-minus");
var $quantityArrowPlus = $(".quantity-arrow-plus");
var $quantityNum = $(".quantity-num");
$quantityArrowMinus.click(quantityMinus);
$quantityArrowPlus.click(quantityPlus);
function quantityMinus() {
if ($quantityNum.val() > 1) {
$quantityNum.val(+$quantityNum.val() - 1);
}
}
function quantityPlus() {
$quantityNum.val(+$quantityNum.val() + 1);
}
})();
});
Простой
