JSFiddle - React, Tailwind, and code Playground

by Mukesh Yadav

HTML

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="qty-minus">
-
</div>
<input type="number" id="qty" step="10" min="10" />
<div id="qty-plus">
+
</div>

JavaScript

jQuery(function() {
  var $field = $('#qty');
  $field.attr('readonly', true);
  var minVal = parseInt($field.attr('min') || 0);
  var step = parseInt($field.attr('step') || 1);

  $('#qty-minus').on('click', function() {
    var val = parseInt($field.val() || 0);
    val = (val - step);
    if (val < minVal) {
      val = minVal;
    }
    $field.val(val);
  });

  $('#qty-plus').on('click', function() {
    var val = parseInt($field.val() || 0);
    val = (val + step);
		if(val < minVal){
		  val = minVal;
		}
    $field.val(val);
  });
});