How can I create multiple ul-lists dynamically?

I have a <ul> "ul-list-one", which contains a number of checkboxes. If I check the checkbox and click the move button it means that it will move to another <ul> "ul-list-two", and the checked checkbox will be removed from the previous, which here would be "ul-list-one".

In "ul-list-two" I can do the same, and it moves to the next, this time "ul-list-three".

Note: "ul-list-two" and "ul-li-three" will be created dynamically.

Here I have done some work, but how can I be able to create multiple <ul>s dynamically?

      $('#mer').click( function() {
        var txtBox = "";    
        var txtstatus = false;  
       $('input[type="checkbox"]').each (function() {             
        var t = $(this);
        var from = 'checklist';
        var val=$("#hidden_id").val();
        v开发者_StackOverflow社区ar 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());
       });
      });      

---

Not the prettiest thing I have ever written. If you want to leave the empty ul's, just comment out the removeEmpties call. I didn't worry about checkbox order, but it would be easy to implement in a separate function after the checkbox is moved. I also assumed you wouldn't want them to move backward beyond the initial ul. If you want that functionality, you could just add another else if to the move function.

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