I'm trying to create a separate list based on list items that are checked. When I user clicks on a checkbox in the main list, I need to add that item to the second list; likewise when the item is unchecked, remove the item from the second list. I have been tearing my hair out for several days trying to get this to work but just can't quite get there.

 

Here is my HTML:

 

      <div class="content">
      <h2>Fabric List</h2>
       <div class="inner">
         <div id="fabrics" class="fabric-gallery fabric-center fabric-captionsbelow">
          <ul class="gallery" id="gallery">
             <li>
               <div class="swatch">
                  <a href="/assets/images/fabrics/prints_americana_redstars_350px.jpg" title="Red Stars">
                    <img id="fabrics_img1" alt="Red Stars" src="assets/images/fabrics/prints_americana_redstars_350px.jpg" width="100" height="100" />
                  </a>
                  <input type="checkbox" name="fabrics" value"1" /> Select
                </div>
              </li>
             <li>
               <div class="swatch">
                  <a href="/assets/images/fabrics/prints_americana_bluestars_350px.jpg" title="Blue Stars">
                    <img id="fabrics_img2" alt="Blue Stars" src="assets/images/fabrics/prints_americana_bluestars_350px.jpg" width="100" height="100" />
                  </a>
                 <input type="checkbox" name="fabrics" value"2" /> Select
                </div>
              </li>
      </ul>
          </div>                
        </div>
      </div>
      <div class="sidebar">
       <h2>Idea List</h2>
       <div class="inner" id="idea-list">
         <ul class="idea-list-items">
          </ul>
        </div>
      </div> 

 

and my jQuery code:

 

$(document).ready(function() {
 
 $('.idea-list-items').remove('li');
 
 $(':checked').siblings('a').each(function(n){
  $('<li>' + $(this).html() + '</li>').appendTo('.idea-list-items');
 });
  
 $(':checkbox').click(function(){
  $('.idea-list-items').remove('li');
  $(':checked').siblings('a').each(function(n){
    $('<li>' + $(this).html() + '</li>').appendTo('.idea-list-items');  
  });
 });
});

 

With the above code I get the checked items to populate the second list but it doesn't remove the items from the list, therefore when I check the first item 1 item is added, when I click the second item both checked items are added after the first item, when I uncheck one item the remaining item is added to the three items, etc., etc.

 

Can anyone point me in the right direction? Thanks in advance.