title: Increase, decrease value in Input and don't show negative number
body: <p>I am trying to make input form and its value can be increased and decreased by click +1 / -1 buttons and I have +5 / -5 button also.</p>
  
  <p>When the value is 3 and click -5 button, the value become -2. 
  But I don't want to show negative number. I want minimum number is always "0".  Even the result value is negative number. </p>
  
  <p>How do I fix the code? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    $(".plus").click(function(e) {
      e.preventDefault();
      var $this = $(this);
      var $input = $this.siblings('input');
      var value = parseInt($input.val());
  
      if (value &lt; 30) {
        value = value + 1;
      } else {
        value = 30;
      }
  
      $input.val(value);
    });
  
  
    $(".plus2").click(function(e) {
      e.preventDefault();
      var $this = $(this);
      var $input = $this.siblings('input');
      var value = parseInt($input.val());
  
      if (value &lt; 30) {
        value = value + 5;
      } else {
        value = 30;
      }
  
      $input.val(value);
    });
  
  
    $(".minus").click(function(e) {
      e.preventDefault();
      var $this = $(this);
      var $input = $this.siblings('input');
      var value = parseInt($input.val());
  
      if (value &gt; 0) {
        value = value - 1;
      } else {
        value = 0;
      }
  
      $input.val(value);
    });
  
  
    $(".minus2").click(function(e) {
      e.preventDefault();
      var $this = $(this);
      var $input = $this.siblings('input');
      var value = parseInt($input.val());
  
      if (value &gt; 0) {
        value = value - 5;
      } else {
        value = 0;
      }
  
      $input.val(value);
    });
  
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.change_qty {
    display: inline-block;
    color: #fff;
    background: #2e748e;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-weight: 900;
    line-height: 22px;
  }
  
  .cursor_hover {
    cursor: hand;
    cursor: pointer;
  }
  
  .change_qty {
    display: inline-block;
    color: #fff;
    background: #2e748e;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-weight: 900;
    line-height: 22px;
  }
  
  .cursor_hover {
    cursor: hand;
    cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div style="margin-bottom:2em;text-align:center;"&gt;
  
    &lt;div class="change_qty minus2 cursor_hover"&gt;&amp;#45;5&lt;/div&gt;
    &lt;div class="change_qty minus cursor_hover"&gt;&amp;#45;1&lt;/div&gt;
  
    &lt;input type="numeric" style="height:22px;width:40px;margin:0 .5em;text-align:center;" value="0"&gt;
  
    &lt;div class="change_qty plus cursor_hover"&gt;&amp;#43;1&lt;/div&gt;
    &lt;div class="change_qty plus2 cursor_hover"&gt;&amp;#43;5&lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is what I tried here 
  <a href="http://jsfiddle.net/a5ktensk/63/" rel="nofollow noreferrer">http://jsfiddle.net/a5ktensk/63/</a></p>