dima-kruglyak,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="content">
<input type="text" value="200" class="price">
<button class="minus value-control" data-action="minus" data-target="quantity" data-cart-id="1">- </button>
<input type="text" value="1" id="quantity" min="1" max="10" class="quantity">
<button class="plus value-control" data-action="plus" data-target="quantity" data-cart-id="1"> + </button>
<span class="total">200</span>
</div>
<div class="content">
<input type="text" value="200" class="price">
<button class="minus value-control" data-action="minus" data-target="quantity" data-cart-id="1">- </button>
<input type="text" value="1" id="quantity" min="1" max="10" class="quantity">
<button class="plus value-control" data-action="plus" data-target="quantity" data-cart-id="1"> + </button>
<span class="total">200</span>
</div>
<script>
$(function () {
$(".content").each(function (indx, el) {
$(el).on('click', '.value-control', function (event) {
var action = $(this).attr('data-action');
var cls = $(this).attr('data-target');
var add = $(this).attr("data-cart-id");
var input = $("."+cls, el)[0];
var min = +input.getAttribute("min");
var max = +input.getAttribute("max");
//input.value = +input.value||min;
input.value -= action == "plus" ? -add : add;
input.value = Math.min(Math.max(min,+input.value),max);
var price = $(".price", el)[0];
//price.value = +price.value||0;
var total = price.value * input.value;
$('.total', el).text(total)
});
});
});
</script>