title: Input value not changing with user input
body: <p>I'm working my way through the Odin Project, attempting to make the "etch-a-sketch" type website with jQuery. The idea is to have a div with a grid inside of it that when moused over, the grid squares change color. The user should also be able to input how many grid squares they want, so if they put 16 in the form, they'll get a 16x16 grid. </p>
  
  <p>I set an initial value to 16. When I input a different number and hit "go", the value just changes back to 16 and the grid remains the same. Where am I going wrong?</p>
  
  <p>Thanks!</p>
  
  <p>Relevant code is as follows:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form&gt;
      &lt;label&gt;Enter the width in pixels:&lt;/label&gt;
      &lt;input id="formbox" type="text" value="16"&gt;
      &lt;input id="setWidth" class="buttons" type="submit" value="Go!"&gt;
      &lt;button id="reset" class="buttons" type="reset"&gt;Reset&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$('#setWidth').click(function () {
      $('.box').css("background-color", "#fff");
      $('.box').remove();
  
      var $divWidth = $('#formbox').val();
  
      for (var i = 0; i &lt; $divWidth; i++) {
          $('#canvas').append('&lt;div class="divHolder"&gt;&lt;/div&gt;');
          $('.divHolder').css("height", Math.floor(500 / $divWidth));
      }
  
      for(var i = 0; i &lt; $divWidth; i++) {
          $('.divHolder').append('&lt;div class="box"&gt;&lt;/div&gt;');
          $('.box').css("width", Math.floor(500 / $divWidth));
          $('.box').css("height", Math.floor(500 / $divWidth));
      }
  });
  </code></pre>