javascript - avoid multiple cloned or duplicated div on button click and insertAfter the same last cloned div once -

i have div , want duplicate it. mean wanted same div duplicated once. have used such code it.

$("#btnaddrules").click(function(){     $(".div1_section").clone().insertafter($(".div1_section")); }); 

but, when click on button again , again , adding multiple of divs , wanted 1 div inserted after last div.

<div class="col-md-8">   <div class="row div1_section">     <div class="col-md-6">       <label>hey hey hey</label>       <select class="form-control">         <option>klklk</option>         <option>huhuuh</option>       </select>       <br/>     </div>     <div class="col-md-6">       <label>abc</label>       <div class="input-group-currency">         <span class="currency">pk</span>         <input type="text" class="form-control input-currency" name="start" value="20'000" style="float:left">       </div>     </div>   </div> 

hope hear you, soon.

thanks

use last() target last element collection:

$("#btnaddrules").click(function() {    $(".div1_section").last().clone().insertafter($(".div1_section").last());  });

.div1_section {    line-height:50px;    margin:20px 0;    padding:0 20px;    background:tomato;    color:white;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <button id="btnaddrules">add more rules</button>  <div class="div1_section">original</div>