MixPetrov,
...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(".quantity_cart").each(function(indx, el) {
var input = $("input", el)[0];
var nmb = +input.dataset.nmb;
var value = +input.value;
var maximum = +input.dataset.maximum;
var minimum = +input.dataset.minimum;
var prc = +input.dataset.prc;
function setValue() {
var ns = +input.value.replace(/\D/g, "") || 0;
ns = Math.ceil(ns / nmb) * nmb;
value = ns
}
function limit() {
return value = Math.min(Math.max(minimum, value), maximum)
}
function add(x) {
return value += x * nmb
}
var span = $("div.price").eq(indx).find("span");
function show() {
input.value = value;
var sum = (value * prc).toFixed(2) + "USD";
span.text(sum)
}
show();
var timer;
$(el).on("click", ".minus, .plus", function() {
var x = $(this).is(".minus") ? -1 : 1;
add(x);
limit();
show()
}).on("input", function() {
window.clearTimeout(timer);
timer = window.setTimeout(function() {
setValue();
limit();
show()
}, 1200)
})
})
});
</script>
</head>
<body>
<div class="quantity_cart">
<span class="minus" ><</span>
<input name="2" size="2" oninput="recalc(2);" value="20" data-maximum="120" data-minimum="20" data-nmb="10" data-prc="0.8400" type="text">
<span class="plus" >></span>
</div>
<div class="price">
<span class="change-price" ></span>
</div>
</body>
</html>