Почему некорректно добавляются инпуты при клике?

Question

[rollex_x93]

Вот код, отрабатывает он довольно странно, сначала добавляет один инпут к уже имеющемуся и потом в геометрической прогрессии начинать добавлять 2,4,8.А мне нужно,чтобы добавляло только 1.

<div id="wrap" style="width: 650px;margin: 0 auto;">
	<form method="post" action="materials.php" name="materials">
	<fieldset>
	<legend>Добавить материал</legend>
	<input type="text" name="material" placeholder="Материал">
	<br>
	<input type="text" name="option[]" placeholder="Опция" class="option">
	<input type="button" name="add_opt" value="Добавить опцию" class="add_opt">
	<br>
	<input type="text" name="option[]" placeholder="Параметр">
	</form>
	</fieldset>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(".add_opt").click( function() {
	// $('#wrap').append('<input type="text" class="option" name="option[]"/>');
	$('<input type="text" placeholder="Опция" class="option" name="option[]"/>').insertAfter('.option')
});
</script>

Answer 1

[Егор Живагин]

Всё логично
Ты вставляешь <input class="option"> после <input class="option"> . теперь у тебя два .option

Потом ты после каждого из них вставляешь ещё по одному.... Понятно?)

Решение: исходному инпуту задать другой/ещё один класс

Comments

[rollex_x93]

Логично)спасибо)

[Егор Живагин]

rollex_x93: да пожалуйста)

Answer 2

[Nik Gubin]

Попробуйте .insertAfter('.option:last')

Если память не отшибает, то в jQuery таким образом последний элемент из коллекции будет выбран.

Answer 3

[Igor Karachentsev]

а почему-бы не обернуть каждый инпут в блок, и через clone этот блок клонировать?