Anfügen Zeile im Container

Question

Ich schreibe einen Code, der dynamisch Zeilen erstellt.
Das Problem ist, wenn ich auf die Schaltfläche klicke fügt es Zeile nach der bereits vorhandenen Zeile. aber jetzt div mit id dynamic enthält zwei Zeilen und wenn ich jetzt auf die Schaltfläche klicke, werden zwei Zeilen hinzugefügt. Wenn ich ('#dynamic') html() benutze, dann packt es Spalten, aber wenn es so gemacht wird, verletzt es die Einrückung, weil es nicht das div mit der Klassenzeile hinzufügen wird. Bitte jeder Körper kann mir die Lösung für ein Problem sagen?

$(function() { 
 

 
    $("#button1").click(function() { 
 

 
    $("#main-row").after($('#dynamic').html()); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section id="above"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-sm-1">No.</div> 
 
     <div class="col-sm-2">Name of Item</div> 
 
     <div class="col-sm-3">Quanity</div> 
 
     <div class="col-sm-3">Price</div> 
 
     <div class="col-sm-1"><span class="btn"></span></div> 
 
    </div> 
 
    </div> 
 
    <div class="container" id="dynamic"> 
 
    <div class="row padding-3 " id="main-row"> 
 
     <div class="col-sm-1 ">1</div> 
 
     <div class="col-sm-2 "> 
 
     <select class="container-fluid"> 
 
        <option value="1">Computer</option> 
 
        <option value="2">Mobile</option> 
 
        <option value="3">LCD</option> 
 
        <option value="4">Keyboard</option> 
 
        <option value="5">Mouse</option> 
 
       </select> 
 
     </div> 
 
     <div class="col-sm-3 "><input class="container-fluid" type="number" name="name" value="" /></div> 
 
     <div class="col-sm-3 "><input type="text" name="text" value="" /></div> 
 
     <div class="col-sm-1 "><a href="#" class="btn-block background-color">-</a></div> 
 
    </div> 
 

 
    </div> 
 
    <button class="btn btn-primary" id="button1">Add Row</button> 
 
</section>

Answer 1

Versuchen:

$(function() { 
    $("#button1").click(function() { 
     $('#dynamic').append($("#main-row").clone().removeAttr('id')); 
    }); 
});