title: How to create a counter using jQuery
body: <p>So I'm trying to create a counter using jQuery but I can't get it to work for some reason.
  I'm using 3 inputs. 1 number input and 2 buttons.</p>
  
  <p>My html looks like this:</p>
  
  <pre><code>&lt;html&gt;
  
      &lt;head&gt;
  
          &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  
      &lt;/head&gt;
  
      &lt;body&gt;
  
          &lt;div id="title"&gt;
              &lt;div id="middle"&gt;
                  &lt;div id="inner"&gt;Books&lt;/div&gt; 
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;input class="counter" type="number" value="0"&gt;&lt;/input&gt;
  
          &lt;input class="red" type="submit" value="-"&gt;&lt;/input&gt;
          &lt;input class="green" type="submit" value="+"&gt;&lt;/input&gt;
  
          &lt;script type="text/javascript" src="jquery-1.11.10.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
  
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>And this is my jQuery code:</p>
  
  <pre><code>$(document).ready(function(){
  
      var num = 0;
  
      $(".red").click(function(){
          num = $(".counter").val();
          num = num - 1;
          $(".counter").val(num);
      })
  
      $(".green").click(function(){
          num = $(".counter").val();
          num = num + 1;
          $(".counter").val(num);
      })
  
  }
  </code></pre>
  
  <p>I can't seem to find what's wrong with my code.</p>