CODEWITHSUNDEEP
javascriptjquery
parcel pik
parcel pik

Reputation: 145

jquery clone copying form elements twice on button click

I am using jquery clone.

When i click on add button a single clone is created with above fields...upto this clone works fine

But when i click Add button twice it create three copy of clone...it create three copies and like that..

i want when i create add button it just create only one clone every time and when i click remove it remove last clone...

below is my code..

<fieldset id="exercises">
          <div class="exercise">  

          </div>
</fieldset>

<script>
$('#add_exercise').on('click', function() {  
  $("<div class='exercise address_box'><div class='box'></div></div>").appendTo('#exercises');
  $("#toaddress").clone().val("").appendTo(".box"); 
  $("#sender_name").clone().val("").appendTo(".box"); 
  $("#OrderMobileCountryCode").clone().val("").appendTo(".box"); 
  $("#sender_no").clone().val("").appendTo(".box"); 
  $("#presentation").clone().val("").appendTo(".box");
  $("<br><button type='button' class='orange_btn' id='add_exercise'>Remove</button>").appendTo('.box');
  $("<br>").appendTo('.box');
  $("<br>").appendTo('#exercises');          
});

$('#exercises').on('click', '.orange_btn', function() {
  $(this).closest(".exercise").remove();
});
</script>

Upvotes: 5

Views: 2560

Answers (4)

R.K.Saini
R.K.Saini

Reputation: 2708

You are using box class to append cloned item to your div. First time its work fine because there is only one div with box class, But in next click there are two div and so on.

Change your add button click listener like this

   $('#add_exercise').on('click', function() {  
      var newDiv = $("<div class='exercise address_box'><div class='box'></div></div>").appendTo('#exercises');
      var boxDiv = newDiv.find(".box");
      $("#toaddress").clone().val("").appendTo(boxDiv); 
      $("#sender_name").clone().val("").appendTo(boxDiv); 
      $("#OrderMobileCountryCode").clone().val("").appendTo(boxDiv); 
      $("#sender_no").clone().val("").appendTo(boxDiv); 
      $("#presentation").clone().val("").appendTo(boxDiv);
      $("<br><button type='button' class='orange_btn' id='add_exercise'>Remove</button>").appendTo(boxDiv);
      $("<br>").appendTo(boxDiv);
      $("<br>").appendTo('#exercises');   

});

EDIT

I added a code snippet here it work fine. I use red boder for box class and black border for addres_box class. 

$('#add_exercise').on('click', function() {  
	  var newDiv = $("<div class='exercise address_box'><div class='box'></div></div>").appendTo('#exercises');
	  var boxDiv = newDiv.find(".box");
	  $("#toaddress").clone().val("").appendTo(boxDiv); 
	  $("#sender_name").clone().val("").appendTo(boxDiv); 
	  $("#OrderMobileCountryCode").clone().val("").appendTo(boxDiv); 
	  $("#sender_no").clone().val("").appendTo(boxDiv); 
	  $("#presentation").clone().val("").appendTo(boxDiv);
	  $("<br><button type='button' class='orange_btn' id='add_exercise'>Remove</button>").appendTo(boxDiv);
	  $("<br>").appendTo(boxDiv);
	  $("<br>").appendTo('#exercises');   
   
});

$('#exercises').on('click', '.orange_btn', function() {
  $(this).closest(".exercise").remove();
});
.address_box{
  padding:10px;
  border:1px solid #000;
}
.box{
border:1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="itemsto-clone">
<input id="toaddress" value="" name="sender_name">
<input id="sender_name" value="" name="sender_name">
<input id="OrderMobileCountryCode" value="" name="sender_name">
<input id="sender_no" value="" name="sender_name">
<input id="presentation" value="" name="presentation">
  
<div>


<fieldset id="exercises">
  <div class="exercise">

  </div>
</fieldset>

<button id="add_exercise">Add Exercise</button>

Upvotes: 0

A.T.
A.T.

Reputation: 26312

Since question is not very clear, here is the way to implement your requirement of cloning elements. 

var counter = (function(){
  var counter = 1;
  return function(){
    return  counter++;
    }
})();

$('#add_exercise').on('click', function() {  
   var clone = $('#exercises div.exercise:eq(0)').clone();
   clone.find('[id]').each(function(i,c){
     $(c).attr('id', $(c).attr('id') + counter());
     $(c).attr('placeholder', $(c).attr('id'));
   });
   $('#exercises').append(clone)
});

$('#remove_exercise').on('click', function() {
  if($('#exercises div.exercise').length !=1)
    $('#exercises div.exercise:last').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
 <button id="add_exercise">Add</button>
 <button id="remove_exercise">Remove</button>
</div>
<div id="exercises">
  <div class="exercise">  
    <input id="myId" placeholder="my id" />
    <input placeholder="input with no id" />
  </div>
</div>

Upvotes: 0

synz
synz

Reputation: 573

You create duplicate class name 'box' and you keep appendTo('.box')

So they just append it to all '.box' class

change your script to this

$('#add_exercise').on('click', function() {  
  $("<div class='exercise address_box'><div class='box'></div></div>").appendTo('.test');
  var lastbox = $(".box").last();
  $("#toaddress").clone().val("").appendTo(lastbox); 
  $("#sender_name").clone().val("").appendTo(lastbox); 
  $("#OrderMobileCountryCode").clone().val("").appendTo(lastbox); 
  $("#sender_no").clone().val("").appendTo(lastbox); 
  $("#presentation").clone().val("").appendTo(lastbox);
  $("<br><button type='button' class='orange_btn' id='add_exercise'>Remove</button>").appendTo(lastbox);
  $("<br>").appendTo(lastbox);
  $("<br>").appendTo('#exercises');          
});

$('#exercises').on('click', '.orange_btn', function() {
  $(this).closest(".exercise").remove();
});

Upvotes: 0

ScanQR
ScanQR

Reputation: 3820

Change id of dynamically added button from add_exercise to remove_exercise

 $("<br><button type='button' class='orange_btn' id='remove_exercise'>Remove</button>").appendTo('.box');

And change the remove button event as ,

$('#exercises').on('click', '#remove_exercise', function() {
  $(this).closest(".exercise").remove();
});

Because your code producing element with same id which in turn triggering events more than once.

Try this modified code,

<script>
$('#add_exercise').on('click', function() {  
  $("<div class='exercise address_box'><div class='box'></div></div>").appendTo('#exercises');
  $("#toaddress").clone().val("").appendTo(".box"); 
  $("#sender_name").clone().val("").appendTo(".box"); 
  $("#OrderMobileCountryCode").clone().val("").appendTo(".box"); 
  $("#sender_no").clone().val("").appendTo(".box"); 
  $("#presentation").clone().val("").appendTo(".box");
  $("<br><button type='button' class='orange_btn' id='remove_exercise'>Remove</button>").appendTo('.box');
  $("<br>").appendTo('.box');
  $("<br>").appendTo('#exercises');          
});

$('#exercises').on('click', '#remove_exercise', function() {
  $(this).closest(".exercise").remove();
});
</script>

Upvotes: 1

Related Questions