JSFiddle - React, Tailwind, and code Playground

by manishie

HTML

<p>
    <img src="http://i.imgur.com/yOadS1c.png" id="minus1" width="20" height="20">
    <input id="qty1" class="qty" type="text" value="1">
    <img id="add1" class="add" 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" class="qty" type="text" value="1">
    <img id="add2" class="add" src="http://i.imgur.com/98cvZnj.png" width="20" height="20">
</p>

JavaScript

$(function () {

    $(".add").click(function () {
        var $qty = $(this).parent().find('.qty');
        var currentVal = parseInt($qty.val());
        if (!isNaN(currentVal)) {
            $qty.val(currentVal + 1);
        }
    });

    $(".minus").click(function () {
        var $qty = $(this).parent().find('.qty');
        var currentVal = parseInt($qty.val());
        if (!isNaN(currentVal) && currentVal > 0) {
            $qty.val(currentVal - 1);
        }
    });

});