Jquery Mobile Table Reflow

Question

I'm trying to create my own script for a mobile version of my tables on my website.

Im currently using the script below to get the size of the table, and create new tables for each row, duplicating the headers into each new table.... (see: http://api.jquerymobile.com/table-reflow/ ) to get an idea of what I'm trying to achieve.

My script is as follows, but their is a js fiddle included at the bottom for a better example.

My problem is that I am only able to create 1 inside each table, where it should really be 3 rows, inside of each table. Again check the fiddle below for a proper example. Can anyone see why it is only creating 1 row in the table?

<script>
$(document).ready(function(){
var TableSize = $("table thead tr th").not("table.mobile_table thead tr th").size(); // Get # of columns
var i = 1;
var TableRowCount = $("table tbody tr").size(); // Get # of body rows
$("table thead tr th").each(function(){
    $(this).attr("id", i++); // Give headers incrementing ID
});
for ( var CreateTables = 1;  CreateTables < TableRowCount; CreateTables++ ){ // Create new table           class="mobile_table" for each row 
$("table").after("<table class='mobile_table'></table>");
}   
$("table.mobile_table").each(function(){// Insert original headers into each row of new table as first column
 var h = 1;
 while ( ++h < TableSize){ // this is where the error is, it gives me the stuff below but x3 (the number of created tables)......

    $("table.mobile_table").after("<tr><td></td><td></td><td></td></tr>"); 

 }
});
console.log(TableSize);
console.log(TableRowCount);
});
  </script> 

See the fiddle: http://jsfiddle.net/Yf7KV/

Answer 1

Do you mean like this: http://jsfiddle.net/Yf7KV/2/

JS

$(this).append("<tr><td class='mobile_col_1'>Col 1</td><td class='mobile_col_2'>Col 2</td></tr>");

Explanation : Append will alllow you to append elements one after the another. html replaces with what you currently have