JSFiddle - React, Tailwind, and code Playground

by R

HTML

<form id='myform' method='POST' action='#' class="numbo">
  <input type='button' value='-' class='qtyminus' field='servers' style="font-weight: bold;" />
  <input type='number' id="servers" name="servers" value="1" class="form-text required" value='1' min=1 class='qty' style="margin-bottom: 0px !important" onkeypress='return event.charCode >= 48 && event.charCode <= 57' />
  <input type='button' value='+' class='qtyplus' field='servers' style="font-weight: bold;" />
</form>

CSS

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

JavaScript

jQuery(document).ready(function() {
  // This button will increment the value
  $('.qtyplus').click(function(e) {
    // Stop acting like a button
    e.preventDefault();
    // Get the field name
    fieldName = $(this).attr('field');
    // Get its current value
    var currentVal = parseInt($('input[name=' + fieldName + ']').val());
    // If is not undefined
    if (!isNaN(currentVal)) {
      // Increment only if value is < 20
      $('input[name=' + fieldName + ']').val(currentVal + 1);
      $('.qtyminus').val("-").removeAttr('style');

    } else {
      // Otherwise put a 0 there
      $('input[name=' + fieldName + ']').val(1);

    }
  });
  // This button will decrement the value till 0
  $(".qtyminus").click(function(e) {
    // Stop acting like a button
    e.preventDefault();
    // Get the field name
    fieldName = $(this).attr('field');
    // Get its current value
    var currentVal = parseInt($('input[name=' + fieldName + ']').val());
    // If it isn't undefined or its greater than 0
    if (!isNaN(currentVal) && currentVal > 1) {
      // Decrement one only if value is > 1
      $('input[name=' + fieldName + ']').val(currentVal - 1);
      $('.qtyplus').val("+").removeAttr('style');
    } else {
      // Otherwise put a 0 there
      $('input[name=' + fieldName + ']').val(1);
      $('.qtyminus').val("-").css('color', '#aaa');
      $('.qtyminus').val("-").css('cursor', 'not-allowed');
    }
  });
});