clone select box in 5 number of times jquery

Question

if click on add button clone select box in 5 number of times jquery

 $('.clkadd').click(function() { $('.twoselect:last').clone().appendTo('.appendtwo'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="twoloop"> <select class="twoselect"><option>element</option><option>Next Level</option></select> <div class="addbtn"><a href="#" class="clkadd">Add</a></div> <div class='appendtwo'> </div> </div> 

Answer 1

The .length property returns the no of elements in DOM. Use it in the condition to restrict the elements to be cloned.

 $('.clkadd').click(function() { var select = $('.twoselect'); if (select.length <= 5) { select.filter(':last').clone().appendTo('.appendtwo'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="twoloop"> <select class="twoselect"><option>element</option><option>Next Level</option></select> <div class="addbtn"><a href="#" class="clkadd">Add</a></div> <div class='appendtwo'> </div> </div> 

Answer 2

You could restrict the click with count of the click below 5

 var c=0; $('.clkadd').click(function() { if(c<5){ $('.twoselect:last').clone().appendTo('.appendtwo'); } c++ }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="twoloop"> <select class="twoselect"><option>element</option><option>Next Level</option></select> <div class="addbtn"><a href="#" class="clkadd">Add</a></div> <div class='appendtwo'> </div> </div>