title: jQuery - increase and decrease value of input by button
body: <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>var x = 1;
  $("#sinolo input").attr('value', x);
  $("#inc").click(function(){
    $("#sinolo input").attr('value', x++);
  });
  $("#dec").click(function(){
    $("#sinolo input").attr('value', x--);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#sinolo{
   width: 35%;
   float: left;
  }
  #sinolo input{
   width: 45%;
   border: none;
   text-align: center;
  }
  #sinolo button{
   width: 25%;
   font-size: 10px;
   padding: 8px 0px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;div id="sinolo"&gt;
    &lt;button id="dec" class="btn btn-info fa fa-minus pull-left"&gt;&lt;/button&gt;
    &lt;input type="text" name="" value=""&gt;
    &lt;button id="inc" class="btn btn-info fa fa-plus pull-right"&gt;&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I face two problems as you can see.</p>
  
  <ol>
  <li><p>At start when I press the button the process is delaying and begins the counting by second click.</p></li>
  <li><p>If I press the + (plus) button and then the - (minus) button, the process is not working properly.
  What can I do?</p></li>
  </ol>