add button should work for each form-holder saparatly-CodePudding

***<!DOCTYPE html>
<html lang="en">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7     /css/bootstrap.min.css" rel="stylesheet"/>
<div id="order-details-booking">
    <blockquote>Self-order Menu</blockquote>
      <div >
        <div >
            <input type="text" id="item-" placeholder="Item Code"/>
        </div>
        <div >
            <input type="text" id="item-code" placeholder="Qty" />
        </div>
        <div >
            <input type="text" id="item-code" placeholder="Remarks" />
        </div>
        <div >
            <i >- remove</i>
        </div>
    </div>
      <div ></div>
      <div >
                <div >
                      <i >  add</i>
        </div></div>
</div>
<div id="order-details-booking2">
    <blockquote>Self-order Menu</blockquote>
      <div >
        
        <div >
            <input type="text" id="item-" placeholder="Item Code"/>
        </div>
        <div >
            <input type="text" id="item-code" placeholder="Qty" />
        </div>
        <div >
            <input type="text" id="item-code" placeholder="Remarks" />
        </div>
        <div >
            <i >- remove</i>
        </div>
    </div>
      <div ></div>
      <div >
                <div >
                      <i >  add</i>
        </div></div>
</div>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7    /js/bootstrap.min.js"></script>
<script>
var id_count = 1;
$('.add').on('click', function() {
var source = $('.form-holder:first'), clone = source.clone();
clone.find(':input').attr('id', function(i, val) {
  return val   id_count;
});
clone.appendTo('.form-holder-append');
id_count  ;
});
//button for add second holder
var id_count2 = 1;
$('.add').on('click', function() {
var source = $('.form-holder:first'), clone = source.clone();
clone.find(':input').attr('id', function(i, val) {
  return val   id_count2;`enter code here`
});
clone.appendTo('.form1-holder-append');
id_count  ;
});
// Removing Form Field
$('body').on('click', '.remove', function() {
var closest = $(this).closest('.form-holder').remove();
});
</script>***

webpage contain 2 form holder, when ever i click add button the action should be performed to each holder separately, but now the if we press add button, the it add form to both form holder.I shared the code in above, I hope I may get help as soon as possible, Thank for help..

********It looks like your post is mostly code; please add some more details.

CodePudding user response：

if you only have two formholders you can solve this by useing unique classes.

var id_count = 1;
$('.add1').on('click', function() {
var source = $('.form-holder1:first'), clone = source.clone();
clone.find(':input').attr('id', function(i, val) {
  return val   id_count;
});
clone.appendTo('.form-holder-append1');
id_count  ;
});
//button for add second holder
var id_count2 = 1;
$('.add2').on('click', function() {
var source = $('.form-holder2:first'), clone = source.clone();
clone.find(':input').attr('id', function(i, val) {
  return val   id_count2;`enter code here`
});
clone.appendTo('.form-holder-append2');
id_count  ;
});
// Removing Form Field
$('body').on('click', '.remove', function() {
var closest = $(this).closest('.form-holder').remove();
});

if you have a dynamic amount of formholders you should use a each() function and count the formholders and each element inside with eq(). This results in only one function for all formholders, independently how many.