title: Appending to list for shopping App
body: <p>This is my first post here. I'm creating a shopping list app and having some difficulty with adding new items to my list. My attempt was to take the value of the input and append it to my list of items. What am I doing wrong? Thanks for your help.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Shopping App&lt;/title&gt;&lt;link rel="stylesheet" href="style.css" type="text/css" /&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;body background="images/image6.jpg"&gt;
      &lt;div id="container"&gt;
        &lt;header&gt;
          &lt;H1&gt;Shopping List&lt;/H1&gt;
        &lt;/header&gt;
        &lt;p&gt;
          Add Item: &lt;input type= "text" name="sumbitText"&gt;
          &lt;button class="addItem"&gt;Add Item&lt;/button&gt;
          &lt;button class="remove"&gt;Remove&lt;/button&gt;
        &lt;/p&gt;
        &lt;ul id="shoppingList"&gt;
          &lt;li&gt;&lt;input type="checkbox"/&gt;Apples&lt;/li&gt;
          &lt;li&gt;&lt;input type="checkbox"/&gt;Bananas&lt;/li&gt;
          &lt;li&gt;&lt;input type="checkbox"/&gt;Grapes&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;script type="text/javascript" src="jquery.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>JavaScript:</p>
  
  <pre><code>$(document).ready(function() {
      var addItem = $('.addItem');
      var removeItem = $('.remove');
  
      addItem.click = $(function() {
          var toAdd = $('input[name=submitText]').val();
          $('#shoppingList').append('&lt;li&gt;&lt;input type="checkbox"/&gt;' + toAdd + '&lt;/li&gt;');
      });
  });
  </code></pre>