How to use loop in Jquery to add table multiple times into div

Question

I want to add table multiple time (based on drop down list selected value) into div tag. I used below code and it is displaying only one table row. Can any one guide me to implement this scenario?

<select id="ddl">
                    <option value="1">1 </option>
                     <option value="2">2 </option>
                      <option value="3">3</option>
                       <option value="4">4 </option>
                       <option value="5">5 </option>
             </select>

    <table id="dis">

    <tr>
           <td> 
            <select id="fieldname1">
                    <option value="1"> 1</option>
                     <option value="2">2 </option>
                      <option value="S3">3</option>
                       <option value="S4">4 </option>
                       <option value="AA">5 </option>
             </select>
           </td> 
       <td> 
            <select id="fieldname2">
                    <option value="1">1 </option>
                     <option value="2">2 </option>
                      <option value="3">3</option>
                       <option value="4">4 </option>
                       <option value="A">A </option>
             </select>
           </td> 
        </tr>
   </table>

<div id="dynamicgroup"> </div>

<script>
     $("#ddl").change(function () {

         var count = parseInt($(this).val());


for (var i = 0; i <count; i++) {


             $('#dynamicgroup').append($('#dis'));


         }

Answer 1

Try this : You are trying to append dis table everytime and this will replace the same table in div, instead you can put its clonned copy. use .clone() and then append it to div

$("#ddl").change(function () {
    var count = parseInt($(this).val());
    for (var i = 0; i <count; i++) {
        $('#dynamicgroup').append($('#dis').clone().removeAttr("id"));
     }
});