JSFiddle - React, Tailwind, and code Playground

by thecodeparadox

HTML

<div class="inputQty">
     <span>
        <small class="up">^</small>
         <small class="down">V</small>
     </span>
     <input type="text" maxlength="6" name="oa_quantity" class="input-quantity"  value="1"/>
 </div>

CSS

.inputQty{ width:190px;}
small{ border:1px solid red; width:14px; height:10px; float:left; display:block;}
span{ float:right; width:15px;}

JavaScript

$('#inputQty small').on('click', function() {

  var cls = $(this).hasClass('up'); // check that it has up class

  $('.input-quantity').val(function() {

     // if up class exists then increase value by 1 else decrease by 1

     return cls ? parseInt(this.value)++ : parseInt(this.value)--;

  });
})