Jquery clone copies form elements twice when a button is clicked

Question

I am using a jquery clone.

When I click the add button, one clone is created with the above fields ... before that, the clone works fine

But when I double click the "Add" button, it creates three copies of the clone ... it creates three copies, etc.

I need when I create the add button, it just creates only one clone each time, and when I click the "Delete" button, it removes the last clown ...

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 1

box div. , div box, div ..

, .

   $('#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

, . red boder box addres_box.

$('#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>

Hide result

Answer 2

id add_exercise remove_exercise

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

, ,

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

, id, , , .

,

<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>

Answer 3

'box', appendTo ('. box')

".box"

script

$('#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();
});

Answer 4

, .

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>

Hide result