Icon clone element in the wrong place

Question

When I click the + next to the Input 1 a line gets cloned and next to the first line a - appears, which is precise what I want :-)

But when I press the + next to the Input 2 the - icon appears in next to the line of Input 1 .

I can't figure out what I'm doing wrong as when you click + next to Input 2 I want the - next to the first line of Input 2

 $(function() { $(document).on('click', '.btn-add', function(e) { e.preventDefault(); var controlForm = $('.controls form:first'), currentEntry = $(this).parents('.entry:first'), newEntry = $(currentEntry.clone()).appendTo(controlForm); newEntry.find('input').val(''); controlForm.find('.entry:not(:last) .btn-add') .removeClass('btn-add').addClass('btn-remove') .removeClass('btn-success').addClass('btn-danger') .html('<span>-</span>'); }).on('click', '.btn-remove', function(e) { $(this).parents('.entry:first').remove(); e.preventDefault(); return false; }); }); 

 .entry { text-align: left; margin-bottom: 25px; margin-top: 25px; } .entry input { height: 50px; padding: 10px; } .entry input:nth-child(2) { margin-left: 25px; width: 66% } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="controls"> <form class="school_form" role="form" autocomplete="off"> <div class="entry input-group"> <input type="text" name="opl_datum" placeholder="Periode Input 1" class='enableOnInput' disabled='disabled'> <input type="text" name="school" placeholder="Input 1" class='enableOnInput' disabled='disabled'> <span class="input-group-btn"> <button class="btn btn-success btn-add" type="button"> <span>+</span> </button> </span> </div> </form> </div> <div class="controls"> <form class="werk_form" role="form" autocomplete="off"> <div class="entry input-group"> <input type="text" name="werk_datum" placeholder="Periode Input 2" class='enableOnInput' disabled='disabled'> <input type="text" name="werkgever" placeholder="Input 2" class='enableOnInput' disabled='disabled'> <span class="input-group-btn"> <button class="btn btn-success btn-add" type="button"> <span>+</span> </button> </span> </div> </form> </div> 

Answer 1

var controlForm = $('.controls form:first')//here you also select first control even if you are on second controlforms

so replace this with

var controlForm = $(this).closest('.controls').find('form:first')//which is also select closest one

 $(function() { $(document).on('click', '.btn-add', function(e) { e.preventDefault(); var controlForm = $(this).closest('.controls').find('form:first'),//you have to select colsest controls currentEntry = $(this).parents('.entry:first'), newEntry = $(currentEntry.clone()).appendTo(controlForm); newEntry.find('input').val(''); controlForm.find('.entry:not(:last) .btn-add') .removeClass('btn-add').addClass('btn-remove') .removeClass('btn-success').addClass('btn-danger') .html('<span>-</span>'); }).on('click', '.btn-remove', function(e) { $(this).parents('.entry:first').remove(); e.preventDefault(); return false; }); }); 

 .entry { text-align: left; margin-bottom: 25px; margin-top: 25px; } .entry input { height: 50px; padding: 10px; } .entry input:nth-child(2) { margin-left: 25px; width: 66% } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="controls"> <form class="school_form" role="form" autocomplete="off"> <div class="entry input-group"> <input type="text" name="opl_datum" placeholder="Periode Input 1" class='enableOnInput' disabled='disabled'> <input type="text" name="school" placeholder="Input 1" class='enableOnInput' disabled='disabled'> <span class="input-group-btn"> <button class="btn btn-success btn-add" type="button"> <span>+</span> </button> </span> </div> </form> </div> <div class="controls"> <form class="werk_form" role="form" autocomplete="off"> <div class="entry input-group"> <input type="text" name="werk_datum" placeholder="Periode Input 2" class='enableOnInput' disabled='disabled'> <input type="text" name="werkgever" placeholder="Input 2" class='enableOnInput' disabled='disabled'> <span class="input-group-btn"> <button class="btn btn-success btn-add" type="button"> <span>+</span> </button> </span> </div> </form> </div>