title: button.click not working after two remove append actions
body: <p>I have a simple shopping list app in html5.</p>
  
  <p>Here is the behavior that works as I want:</p>
  
  <p>You can click on the <code>$donebutton</code> and it moves the item from <code>#tbdlist</code> to <code>#donelist</code>. If you did this accidentally, the <code>$undobutton</code> will move the item back to the <code>#tbdlist</code>.</p>
  
  <p>Here is what should happen next:</p>
  
  <p>When I click on the <code>$donebutton</code> a second (third, fourth) time, it should move it back from #tbdlist to <code>#donelist</code>, but it doesn't. The <code>$donebutton</code> stops working. I think the <code>$delbutton</code> also stops working.</p>
  
  <p>Can someone help me understand what is going on and how to fix it. I think it has something to do with scoping. The <code>.click</code> functions are all on one level, and the second time around we are "inside" the <code>$donebutton.click</code> function, but this makes no sense to me since the variables are declared on the top level. If the variable even exists, its methods should exist.</p>
  
  <p>Thanks in advance,
  Omar</p>
  
  <p>HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('form').submit(function(event){
   event.preventDefault();
      var $delbutton = $('&lt;li&gt;&lt;button class="delbutton"&gt;x&lt;/button&gt;&lt;br&gt;&lt;/li&gt;');
      var $listitem = $('&lt;div&gt;&lt;/div&gt;')
      var $donebutton = $('&lt;li&gt;&lt;button class="donebutton"&gt;' + $('#itemname').val() + '&lt;/button&gt;&lt;/li&gt;');
      var $itemname = $('&lt;li&gt;'+ $('#itemname').val() + '&lt;/li&gt;');
      var $nameday = $('&lt;li&gt;yourname&lt;/li&gt;&lt;li&gt;datetoday&lt;/li&gt;');
      var $undobutton = $('&lt;li&gt;&lt;button class="undobutton"&gt;^&lt;/button&gt;&lt;br&gt;&lt;/li&gt;');
      var $doneitem = $('&lt;span class="added"&gt;&lt;/span&gt;');
      //var $doneitem = $('&lt;div&gt;&lt;/div&gt;');
      $listitem.append($donebutton);
      $listitem.append($nameday);
      $listitem.append($delbutton);
   $('#tbdlist').append($listitem);
   $('input').val('');
      $donebutton.click(function() {
          $doneitem.append($itemname);
          $doneitem.append($nameday);
          $doneitem.append($undobutton);
          $("#donelist").append($doneitem);
          $listitem.remove();
      });
      $delbutton.click(function() {
          $listitem.remove();
      });
      $undobutton.click(function(){
      //var $delbutton = $('&lt;li&gt;&lt;button class="delbutton"&gt;x&lt;/button&gt;&lt;br&gt;&lt;/li&gt;');
      //var $donebutton = $('&lt;li&gt;&lt;button class="donebutton"&gt;' + $('#itemname').val() + '&lt;/button&gt;&lt;/li&gt;');
          $nameday = $('&lt;li&gt;yourname&lt;/li&gt;&lt;li&gt;datetoday&lt;/li&gt;');
          $listitem = $('&lt;div&gt;&lt;/div&gt;')
          $listitem.append($donebutton);
          $listitem.append($nameday);
          $listitem.append($delbutton);
          $('#tbdlist').append($listitem); 
          $doneitem.remove();       
      });
  
  });
  
  function archive() {
      $('#donelist .added').remove();
  }
  
  $(document).ready(function(){
  
   alert("its on");
  
  });
  
  /* Jquery load test
  window.onload = function() {
      if (window.jQuery) {  
          // jQuery is loaded  
          alert("Yeah!");
      } else {
          // jQuery is not loaded
          alert("Doesn't Work");
      }
  }
  */</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.hdr {
   text-align: center;
      color: black;
      font-weight: bold;
      background: lightblue; /* yellow */
      border: 2px solid black;
      padding: 1em;
  }
  #main{
   text-align: center;
  
  }
  #tbdlist {
    text-align: center;
    /*font-weight: bold;*/
    border: 1px solid black;
    list-style-type: none;
  }
  
  #donelist {
    text-align: center;
    /*font-weight: bold;*/
    border: 1px solid black;
    list-style-type: none;
  }
  
  #tbdlist li { 
   width:25%;
  } 
  
  #donelist li   { 
    width:25%; 
  } &lt;span class="code-comment"&gt;/* 4 col */&lt;/span&gt;
  
  #tbdlist ul, #donelist, ul{
    width:760px;
    margin-bottom:20px;
    overflow:hidden;
  }
  #tbdlist li, #donelist li{
    line-height:1.5em;
    float:left;
    display:inline;
  }
  /* {
   border-color: red;
  }
  */
  button {
    background: #3498db;
    background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
    background-image: -moz-linear-gradient(top, #3498db, #2980b9);
    background-image: -ms-linear-gradient(top, #3498db, #2980b9);
    background-image: -o-linear-gradient(top, #3498db, #2980b9);
    background-image: linear-gradient(to bottom, #3498db, #2980b9);
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    font-family: Arial;
    color: #ffffff;
    font-size: 12px;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
   &lt;title&gt;Shopping List App&lt;/title&gt;
   &lt;link rel="stylesheet" type="text/css" href="css/main.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;header class="hdr"&gt;
    &lt;h2 class="titleid"&gt;Shopping List App&lt;/h2&gt;
   &lt;/header&gt;
   &lt;div id="main"&gt;
    &lt;ul id="tbdlist"&gt;
     &lt;li&gt;Item&lt;/li&gt;
     &lt;li&gt;Addedby&lt;/li&gt;
     &lt;li&gt;Date&lt;/li&gt;
     &lt;li&gt;Undo&lt;/li&gt;
    &lt;/ul&gt;
    &lt;br&gt;
    &lt;div class="adder"&gt;
     &lt;form&gt;
     &lt;input type="text" id="itemname" name="Item" Placeholder = "An Item"/&gt;
     &lt;br&gt;by: username &lt;br&gt;
     on: today's date &lt;br&gt;
    &lt;/form&gt;
    &lt;/div&gt;
    &lt;button onclick="archive()"&gt;Archive&lt;/button&gt;
    &lt;ul id="donelist"&gt;
     &lt;li&gt;Item&lt;/li&gt;
     &lt;li&gt;Doneby&lt;/li&gt;
     &lt;li&gt;Date&lt;/li&gt;
     &lt;li&gt;Reget&lt;/li&gt;  
  
    &lt;/ul&gt;
   &lt;/div&gt;
   &lt;script src="js/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
   &lt;script src="js/app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>