parcel pik parcel pik - 4 days ago 5
jQuery Question

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>

Answer

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>

Comments