Jquery Mobile Column Toggle append button when have multiple tables on one page

Question

I have an issue with a jquery mobile 1.4.2 webapp. I have a page with 2 tables that both use the column toggle button. I want to move each of these buttons to their own placeholder to allow for horizontal scrolling.

I have this working when there is one table, but I can't figure out how to specify the table id for the column toggle button, to move the button for the correct table.

<div id="colUnit"></div>

$(document).on("pageinit", "#contractDetails", function () {
   $(".ui-table-columntoggle-btn").appendTo("#colUnit");
}); 

Is there a way to specify the table id within the jquery so that the correct button is moved to <div id="colUnit"></div>

It currently places BOTH buttons (one from each table), into <div id="colUnit"></div>

Answer 1

column-toggle buttons are siblings of tables and placed before them. Use .prev() to move to another place.

$("#mytable1, #mytable2")
    .prev(".ui-table-columntoggle-btn")
    .appendTo("#colUnit");

---

Update

You can also append them into a controlgroup and change their text.

<div id="colUnit" data-role="controlgroup" data-type="horizontal"></div>

Move buttons to controlgroup.

$("#mytable1, #mytable2")
    .prev(".ui-table-columntoggle-btn")
    .each(function () {
    var text = $.mobile.path.parseUrl($(this)
        .prop("href"))
        .hash.substring(1);
    $(this)
        .text(text.split("-")[0])
        .appendTo($("#colUnit")
        .controlgroup("container"));
});

$("#colUnit").controlgroup("refresh");

Demo