Make icons act like add/minus for quantities

Make icons act like add/minus for quantities

by Mukesh Yadav

HTML

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="qty-minus1">
  -
</div>
<input type="number" id="qty1" step="1" min="0" />
<div id="qty-plus1">
  +
</div>
<hr />
<div id="qty-minus2">
  -
</div>
<input type="number" id="qty2" step="1" min="0" />
<div id="qty-plus2">
  +
</div>
<hr />
<div id="qty-minus3">
  -
</div>
<input type="number" id="qty3" step="1" min="0" />
<div id="qty-plus3">
  +
</div>

JavaScript

var ids = ["1", "2", "3"];
	jQuery(function() {
		for (var i = 0; i < ids.length; i++) {
			(function() {
				var $field = $('#qty' + ids[i]);
				$field.attr('readonly', true);
				var minVal = parseInt($field.attr('min') || 0);
				var step = parseInt($field.attr('step') || 1);

				$('#qty-minus' + ids[i]).on('click', function() {
					var val = parseInt($field.val() || 0);
					val = (val - step);
					if (val < minVal) {
						val = minVal;
					}
					$field.val(val);
				});

				$('#qty-plus' + ids[i]).on('click', function() {
					var val = parseInt($field.val() || 0);
					val = (val + step);
					if (val < minVal) {
						val = minVal;
					}
					$field.val(val);
				});
			})();
		}
	});