CODEWITHSUNDEEP
javascriptjquery
swaroop komma
swaroop komma

Reputation: 3

clone select box in 5 number of times jquery

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>

Upvotes: 0

Views: 62

Answers (2)

Satpal
Satpal

Reputation: 133433

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>

Upvotes: 2

prasanth
prasanth

Reputation: 22500

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>

Upvotes: 0

Related Questions