Clone the multiple tables to ONE table

by Santosh Giridhara

HTML

<table class="table-1" border="1">
    <thead>
        <tr>
            <th>00</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>c1</td>
        </tr>
        <tr>
            <td>c2</td>
        </tr>
        <tr>
            <td>c3</td>
        </tr>
        <tr>
            <td>c4</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>-</td>
        </tr>
    </tfoot>
</table>
<table class="table-2" border="1">
    <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
        </tr>
    </tfoot>
</table>
<table class="table-3" border="1">
    <thead>
        <tr>
            <th>01</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>c1</td>
        </tr>
        <tr>
            <td>c2</td>
        </tr>
        <tr>
            <td>c3</td>
        </tr>
        <tr>
            <td>c4</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>-</td>
        </tr>
    </tfoot>
</table>
<br/>
<br/>
<div id="dynamic">
    <table border="1"></table>
</div>
<br/>
<span>desired output</span>

<div id="dynamicTable">
    <table border="1">
        <thead>
            <tr>
                <th>00</th>
                <th>1</th>
                <th>2</th>
                <th>3</th>
       ...

CSS

.table-1, .table-2, .table-3 {
    display:inline-block;
    height:auto;
    position: relative;
}

JavaScript

$(function(){
    var $table1 = $('.table-1');
    var $table2 = $('.table-2');
    var $table3 = $('.table-3');
    $('#dynamic table').append($('<thead></thead>').append($table1.find('thead tr').children().clone()).append($table2.find('thead tr').children().clone()).append($table3.find('thead tr').children().clone()));
    var $allBodyTr = $table1.find('tbody tr')
    $table1.find('tbody tr').each(function(index,value){
    	var data = [];
    	data.push($table1.find('tbody tr').eq(index).find('td').clone());
    	data.push($table2.find('tbody tr').eq(index).find('td').clone());
    	data.push($table3.find('tbody tr').eq(index).find('td').clone());
    	$('#dynamic table').append($('<tbody></tbody>').append(data));
    });
    $('#dynamic table').append($('<tfoot></tfoot>').append($table1.find('tfoot tr').children().clone()).append($table2.find('tfoot tr').children().clone()).append($table3.find('tfoot tr').children().clone()));
});