JSFiddle - React, Tailwind, and code Playground

by MULLAINATHAN MANICKAM

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="input-group">
  <span class="input-group-btn">
    <button type="button" class="btn btn-danger letter-minus btn-number"  data-type="minus" data-field="letter_sapce">
      <span class="glyphicon glyphicon-minus"></span>
  </button>
  </span>
  <input type="text" disabled="disabled" name="letter_sapce" class="form-control input-number" value="10" min="1" max="10">
  <span class="input-group-btn">
    <button type="button" class="btn btn-success letter-plus btn-number" data-type="plus" data-field="letter_sapce">
      <span class="glyphicon glyphicon-plus"></span>
  </button>
  </span>
</div>

JavaScript

// Bootstarp, jQuery - Count Change

$('.btn-number').click(function(e) {
  e.preventDefault();

  fieldName = $(this).attr('data-field');
  type = $(this).attr('data-type');
  var input = $("input[name='" + fieldName + "']");
  var currentVal = parseInt(input.val());
  if (!isNaN(currentVal)) {
    if (type == 'minus') {

      if (currentVal > input.attr('min')) {
        input.val(currentVal - 1).change();
        $(".letter-plus").attr('disabled', false);
      }
      if (parseInt(input.val()) == input.attr('min')) {
        $(this).attr('disabled', true);
      }

    } else if (type == 'plus') {

      if (currentVal < input.attr('max')) {
        input.val(currentVal + 1).change();
        $(".letter-minus").attr('disabled', false);
      }
      if (parseInt(input.val()) == input.attr('max')) {
        $(this).attr('disabled', true);
      }

    }
  } else {
    input.val(0);
  }
});