JQuery clone div при каждом нажатии

У меня простая форма и кнопка для клонирования моей формы при нажатии. Проблема в том, что когда я нажимаю кнопку в первый раз, она работает правильно, но в течение последующих раз она добавляет много divs при нажатии. Есть ли способ копировать один за другим каждый раз при нажатии? вот мой фрагмент:

$(document).ready(function() {
    $(".Add").click(function() {
        $(".formi").clone().insertAfter(".formi:last");
    });
});

.formi {
    border: 1px solid #000;
    width: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
    <form class="formi">
        <input type="text" placeholder="name" />
        <select name="cars">
            <option value="">one</option>
            <option value="">two</option>
        </select>
        <button type="submit">ok</button>
    </form>
</div>

Ответы

Ответ 1

Вы можете найти первую форму вместо поиска всего в DOM с помощью eq(0) или найти последнюю,

$(document).ready(function(){
    $(".Add").click(function(){
		  $(".formi").eq(0).clone().insertAfter(".formi:last");
//$(".formi:last").clone().insertAfter(".formi:last");
    });
});

.formi{border:1px solid #000;width:50%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
<form class="formi">
<input type="text" placeholder="name"/>
<select name="cars">
<option value="">one</option>
<option value="">two</option>
</select>
<button type="submit">ok</button>
</form>
</div>

Ответ 2

$(".formi").clone(). клонирует все элементы .formi, доступные на странице. Вам нужно только клонировать первый элемент .formi, а не .formi, который был добавлен с помощью шаблона.

$(".Add").click(function(){
    var $formTemplate = $(".formi:first");
    $formTemplate.clone().insertAfter(".formi:last");
});

Ответ 3

Вам нужно клонировать только первое, используя метод .eq(), который уменьшает набор согласованных элементов до тех, которые указаны в указанном индексе.

Пожалуйста, попробуйте следующее:

$(".formi").eq(0).clone().insertAfter(".formi:last");

Литература:

метод eq

$(document).ready(function() {
  $(".Add").click(function() {
    $(".formi").eq(0).clone().insertAfter(".formi:last");

  });
});

.formi {
  border: 1px solid #000;
  width: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
  <form class="formi">
    <input type="text" placeholder="name" />
    <select name="cars">
      <option value="">one</option>
      <option value="">two</option>
    </select>
    <button type="submit">ok</button>
  </form>
</div>

Ответ 4

$(document).ready(function(){
    $(".Add").click(function(){
		$(".formi").eq(0).clone().insertAfter(".formi:last");
    });
});

.formi{border:1px solid #000;width:50%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
<form class="formi">
<input type="text" placeholder="name"/>
<select name="cars">
<option value="">one</option>
<option value="">two</option>
</select>
<button type="submit">ok</button>
</form>
</div>

Ответ 5

$(document).ready(function() {
  $(".Add").click(function() {
    $(".formi:nth-child(1)").clone().insertAfter(".formi:last");

  });
});

.formi {
  border: 1px solid #000;
  width: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
  <form class="formi">
    <input type="text" placeholder="name" />
    <select name="cars">
      <option value="">one</option>
      <option value="">two</option>
    </select>
    <button type="submit">ok</button>
  </form>
</div>

Ответ 6

$(document).ready(function(){
    $(".Add").click(function(){
		$(".formi:last").clone().insertAfter(".formi:last");

    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
<form class="formi">
<input type="text" placeholder="name"/>
<select name="cars">
<option value="">one</option>
<option value="">two</option>
</select>
<button type="submit">ok</button>
</form>
</div>

Ответ 7

Используйте :nth-child(1)

$(document).ready(function(){
    $(".Add").click(function(){
		$(".formi:nth-child(1)").clone().insertAfter(".formi:last");

    });
});

.formi{border:1px solid #000;width:50%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
<form class="formi">
<input type="text" placeholder="name"/>
<select name="cars">
<option value="">one</option>
<option value="">two</option>
</select>
<button type="submit">ok</button>
</form>
</div>

Ответ 8

Используйте first(), метод first() возвращает первый элемент выбранных элементов.

$(document).ready(function() {
  $(".Add").click(function() {
    $(".formi").first().clone().insertAfter(".formi:last");

  });
});

.formi {
	border: 1px solid #000;
	width: 50%;
}

<span class="Add">Add+</span>
<div class="all">
  <form class="formi">
    <input type="text" placeholder="name" />
    <select name="cars">
      <option value="">one</option>
      <option value="">two</option>
    </select>
    <button type="submit">ok</button>
  </form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Ответ 9

Я прокомментировал, где вы делаете ошибку и что будет возможным решением для этого

$(document).ready(function() {
$(".Add").click(function() {
//Mistake : when you are clicking second time, you clone both the forms having class '.formi'
$(".formi").clone().insertAfter(".formi:last");

// $(".formi:nth-child(1)").clone().insertAfter(".formi:last"); : This one will work

  });
});