圖標克隆元素放置在錯誤的位置

Question

當我單擊Input 1旁邊的+ ，將克隆一行，並在第一行旁邊出現- ，這正是我想要的內容:-)

但是，當我按Input 2旁邊的+時， -圖標出現在Input 1的行旁邊。

我無法弄清楚我在做什么錯，因為當您單擊Input 2旁邊的+ ，我想要- 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'）//在這里，即使您使用的是第二個控件窗體，也可以選擇第一個控件

所以換成

var controlForm = $（this）.closest（'。controls'）。find（'form：first'）//這也是選擇最接近的一個

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