JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<p>
<img src="http://i.imgur.com/yOadS1c.png" id="minus1" width="20" height="20">
<input id="qty1" type="text" value="1">
<img id="add1" src="http://i.imgur.com/98cvZnj.png" width="20" height="20">
</p>
<p>
<img src="http://i.imgur.com/yOadS1c.png" id="minus2" width="20" height="20">
<input id="qty2" type="text" value="1">
<img id="add2" src="http://i.imgur.com/98cvZnj.png" width="20" height="20">
</p>
<p>
<img src="http://i.imgur.com/yOadS1c.png" id="minus3" width="20" height="20">
<input id="qty3" type="text" value="1">
<img id="add3" src="http://i.imgur.com/98cvZnj.png" width="20" height="20">
</p>
</body>
JavaScript
function add(value){
var currentVal = parseInt($("#qty" + value).val());
if (!isNaN(currentVal)) {
$("#qty" + value).val(currentVal + 1);
}
};
function minus(value){
var currentVal = parseInt($("#qty" + value).val());
if (!isNaN(currentVal)) {
$("#qty" + value).val(currentVal - 1);
}
};
function closeOver(f, value){
return function(){
f(value);
};
}
$(function () {
var numButtons = 2;
for (var i = 1; i <= numButtons; i++) {
$("#add" + i).click(closeOver(add, i));
$("#minus" + i).click(closeOver(minus, i));
}
});