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

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>