Мобильный стол Jquery Reflow

Я пытаюсь создать свой собственный скрипт для мобильной версии моих таблиц на моем веб-сайте.

В настоящее время я использую сценарий ниже для получения размера таблицы и создания новых таблиц для каждой строки, дублирования заголовков в каждой новой таблице... (см. Http://api.jquerymobile.com/table-reflow/), чтобы понять, чего я пытаюсь достичь.

Мой сценарий выглядит следующим образом, но их сценарий js включен внизу для лучшего примера.

Моя проблема в том, что я могу только создать 1 внутри каждой таблицы, где она должна быть 3 строки внутри каждой таблицы. Снова проверьте скрипту ниже для правильного примера. Может ли кто-нибудь понять, почему он только создает 1 строку в таблице?

<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> 

Смотрите скрипку: http://jsfiddle.net/Yf7KV/