Appending children to different elements with same class name

Question

Using a custom CMS's "Form Builder", I complied an extensive form, with lists of checkboxes for each music "Category" to choose different songs from. The form writes the HTML in a table format, so I used the below code to convert it into an unordered list format that's to be broken down into two columns:

$(document).ready(function() {
    var ul = $("<ul class='songList'>");
    $(".checkList tr").each(function(){
        var li = $("<li>")
        $("td", this).each(function(){
            var p = $("<p>").html(this.innerHTML);
            li.append(p);
        });
        ul.append(li);
    })    
$(".checkList").replaceWith(ul);
$('.songList').cols(2);

I get the desired results with the UL and the two columns, but instead of each TABLE being turned into a UL with it's own LIs, two long gigantic ULs of the LIs is compiled using all the LIs that were separated in their own tables previously. How can I get it so that each ul/table is converted separately?

See results here: http://dev601.webdugout.com/Song-Requests

Answer 1

You should iterate each checkList table and create UL. As of now you are iterating the table rows thus you are getting a single unordered list

//Iterate each table
$("table.checkList").each(function(){
    //create ul for each table
    var ul = $("<ul class='songList'>");

    //Iterate on current table
    $("tr", this).each(function(){
        var li = $("<li>")
        $("td", this).each(function(){
            var p = $("<p>").html(this.innerHTML);
            li.append(p);
        });
        ul.append(li);
    });

    //Replace current table with ul
    $(this).replaceWith(ul);
});

$('.songList').cols(2);