複数のULリストを動的に作成するにはどうすればよいですか？

Question

私は<ul> "ul-list-one"を持っています。これにはいくつかのチェックボックスが含まれています。チェックボックスをチェックして移動ボタンをクリックすると、別の<ul> "ul-list-two"に移動することを意味し、チェックされたチェックボックスは前のものから削除されます。ここでは "ul-list-one"となります。 「UL-リスト-2」では

私は同じことを行うことができ、それは次回、この時間は、「UL-リスト-3」に移動します。

注： "UL-リスト-2" と "UL-LI-3は" 動的に作成されます。

ここで私はいくつかの作業を行っているが、どのように私は動的に複数の<ul> Sを作成することができますか？

 $('#mer').click(function() { 
     var txtBox = "";  
     var txtstatus = false; 
     $('input[type="checkbox"]').each (function() {    
     var t = $(this); 
     var from = 'checklist'; 
     var val=$("#hidden_id").val(); 
     var to = 'ch'; 
     if (!t.is(':checked')){ 
      var swap = to; 
      to = from; 
      from = swap; 
      } else { 
      txtstatus = true; 
      } 
     $(':checkbox:checked').attr('disabled', true); 
     $('#'+to).append(t.attr('name', to).parent()); 
     $('#ch').addClass('br');   
     }); 
     if(txtstatus){ 
     txtBox = "<input type='text' value=''>"; 
     $('#ch').after(txtBox); 
     } 
     }); 

     //close buttom code 
     $('#cls').click(function() { 
     $('input[type="checkbox"]').each (function() {   
     var t = $(this); 
     var from = 'checklist'; 
     var to = 'ch'; 
     if (t.is(':checked')){ 
      var swap = to; 
      to = from; 
      from = swap; 
      } 
     $(':checkbox:checked').attr('disabled', false); 
     $(':checkbox:checked').attr('checked', false); 
     $('#'+from).append(t.attr('name', from).parent()); 
     }); 
     });  

Answer 1

私が今までに書いた中で最も美しいものではありません。空のulを残す場合は、removeEmptiesコールをコメントアウトしてください。チェックボックスの順序については心配しませんでしたが、チェックボックスを移動した後は別の関数で実装するのは簡単です。私は、あなたが最初のulを超えて後退することを望まないとも仮定しました。その機能が必要な場合は、move関数に別の機能を追加するだけです。

http://jsfiddle.net/pJgyu/13225/