图标克隆元素放置在错误的位置

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>