title: Add or remove item to <li> based on checkboxes selection
body: <p>I've four checkboxes in one div.</p>
  
  <pre><code>&lt;div id="tab1" class="tab-pane"&gt;
      &lt;input type="checkbox" id="chkbox" value="101"&gt;  This is 101
      &lt;input type="checkbox" id="chkbox" value="102"&gt;  This is 102
      &lt;input type="checkbox" id="chkbox" value="103"&gt;  This is 103
      &lt;input type="checkbox" id="chkbox" value="104"&gt;  This is 104
  &lt;/div&gt;
  </code></pre>
  
  <p>Now on each click, I want to insert/remove a <code>&lt;li&gt;</code> item on another div that's on the right hand side when the checkbox is checked/unchecked. Another div:</p>
  
  <pre><code>&lt;div id="items"&gt;
      &lt;ul id="itemList"&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>Am doing something like this:</p>
  
  <pre><code>$("#chkbox").click(function() {
              // If checked
              if ($(this).is(":checked")) {
                  //add to the right
                  $a = $(this).val();
                  $("#itemList").append('&lt;li&gt;'+$a+'&lt;/li&gt;');
              }
              else {
                  //hide to the right
                  $("#itemList").slideUp("fast", function () {
                          $("#itemList").child.remove();
                      });
              }
          });
  </code></pre>
  
  <p>This doesn't seem to work :(</p>