Q:

Create multiple html tables with jquery

I have a html table with the following attributes:
<h1 id="tableTitle"></h1>
    <div style="overflow-x: auto; white-space: nowrap; height:305px">
    <table id="render_${pluginId}" border="1" style="width: 100%" class="testRunTable">
        <tr>
            <th id="tableHeader">Test Types</th>
            <th id="tableHeader"># of Tests</th>
            <th id="tableHeader"># of Approved <br> Test Designs</br></th>
            <th id="tableHeader"># Executed</th>
            <th id="tableHeader"># Passed</th>
            <th id="tableHeader">% Executed</th>
            <th id="tableHeader">% Passing <br> (of Executed)</th>
            <th id="tableHeader"># Blocked</th>
            <th id="tableHeader"># Failed</th>
            <th id="tableHeader"># Defects<br> Opened</br> </th>
            <th id="tableHeader"># Defects<br> Resolved</br></th>
            <th id="tableHeader"># Technical<br> Debt</br> </th>
        </tr>
    </table>
    </div>

I need a jquery function to dynamically create this same table using a loop . Any help is appreciated

A:

Here is solution.
All you need is to use jquery clone method. Then you have to append to your div.

for(var i = 0; i < 10; i++){
  $('div').append($('table').eq(0).clone());
  //or this: $('div').append($('table:first').clone());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="tableTitle"></h1>
    <div style="overflow-x: auto; white-space: nowrap; height:305px">
    <table id="render_${pluginId}" border="1" style="width: 100%" class="testRunTable">
        <tr>
            <th id="tableHeader">Test Types</th>
            <th id="tableHeader"># of Tests</th>
            <th id="tableHeader"># of Approved <br> Test Designs</br></th>
            <th id="tableHeader"># Executed</th>
            <th id="tableHeader"># Passed</th>
            <th id="tableHeader">% Executed</th>
            <th id="tableHeader">% Passing <br> (of Executed)</th>
            <th id="tableHeader"># Blocked</th>
            <th id="tableHeader"># Failed</th>
            <th id="tableHeader"># Defects<br> Opened</br> </th>
            <th id="tableHeader"># Defects<br> Resolved</br></th>
            <th id="tableHeader"># Technical<br> Debt</br> </th>
        </tr>
    </table>
    </div>

