JSFiddle - React, Tailwind, and code Playground

by riyadh

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-quantity-input">
  <input type="number" min="0" max="23" name="quantity" class="" value="5">
     <a href="#" class="quantity-input-up"><i class="fa fa-angle-up">+</i></a>
     <a href="#" class="quantity-input-down"><i class="fa fa-angle-down">-</i></a>
</div>

<div class="custom-quantity-input">
  <input type="number" min="0" max="59" name="quantity" class="" value="9">
     <a href="#" class="quantity-input-up"><i class="fa fa-angle-up">+</i></a>
     <a href="#" class="quantity-input-down"><i class="fa fa-angle-down">-</i></a>
</div>

JavaScript

$(function(){
  $(".quantity-input-up").click(function(){
    var inpt = $(this).parents(".custom-quantity-input").find("[name=quantity]");
    var val = parseInt(inpt.val());
    if ( val < 0 ) inpt.val(val=0);
    inpt.val(val+1);
  });
  $(".quantity-input-down").click(function(){
    var inpt = $(this).parents(".custom-quantity-input").find("[name=quantity]");
    var val = parseInt(inpt.val());
    if ( val < 0 ) inpt.val(val=0);
    if ( val == 0 ) return;
    inpt.val(val-1);
  });
});