JSFiddle - React, Tailwind, and code Playground

by popsyjunior

HTML

<div class="quantity">
  <input class="minus" type="button" value="-">
  <input type="number" step="1" min="0" max="" name="cart[256a54619faec7a3f96b726a46dae520][qty]" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric">
  <input class="plus" type="button" value="+">
</div>

JavaScript

$('.quantity').on('click', '.plus', function(e) {
  $input = $(this).prev('input.qty');
  var val = parseInt($input.val());
  var step = $input.attr('step');
  step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
  $input.val(val + step).trigger('change');
});
$('.quantity').on('click', '.minus', function(e) {
  $input = $(this).next('input.qty');
  var val = parseInt($input.val());
  var step = $input.attr('step');
  step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
  if (val > 0) {
    $input.val(val - step).trigger('change');
  }
});

$('.qty').on('change', function() {
  alert('.qty has changed!');
});