Почему событие click в jQuery не срабатывает второй раз?

Question

[Dvizhnyak]

Есть событие которое, по клику на кнопку, добавляет HTML код на страницу.

$(document).ready(function(){
	$('.add').on('click', function() {
	event.preventDefault();
	var i = $('.input_selection').length + 1;
	if (i<6) {
	$('<div class="input_selection"><input type="text" name="amount' + i + '" id="amount' + i + '" placeholder="Количество"><div class="wrapper_select"><select name="type_cargo' + i + '" id="type_cargo' + i + '"><option>Вид груза</option><option value="Документы | 0.1 кг">Документы | 0.1 кг</option><option value="Груз | > 1 кг">Груз | > 1 кг</option><option value="Груз | < 1 кг">Груз | < 1 кг</option></select></div><input type="text" name="length' + i + '" id="length' + i + '" placeholder="Длина, см"><input type="text" name="width' + i + '" id="width' + i + '" placeholder="Ширина, см"><input type="text" name="height' + i + '" id="height' + i + '" placeholder="Высота, см"><input type="text" name="weight' + i + '" id="weight' + i + '" placeholder="Вес, кг">').appendTo('.two_section');}
	return false;
	});
});

<div class="two_section">
							<label for="amount">Посылки:</label>
							<div class="input_selection">
								<input type="text" name="amount1" id="amount1" placeholder="Количество">
								<div class="wrapper_select">
									<select name="type_cargo1" id="type_cargo1">
										<option>Вид груза</option>
										<option value="Документы | 0.1 кг">Документы | 0.1 кг</option>
										<option value="Груз | > 1 кг">Груз | > 1 кг</option>
										<option value="Груз | < 1 кг">Груз | < 1 кг</option>
									</select>
								</div>
								<input type="text" name="length1" id="length1" placeholder="Длина, см">
								<input type="text" name="width1" id="width1" placeholder="Ширина, см">
								<input type="text" name="height1" id="height1" placeholder="Высота, см">
								<input type="text" name="weight1" id="weight1" placeholder="Вес, кг">
							</div>

						
						</div>
						<div class="three_section">
							<div class="add_pos">
								<button class="add" type="button">Добавить посылку</button>
							</div>
						</div>

Событие срабатывает при нажатии на кнопку в первый, третий, четвертый раз. Но не срабатывает при нажатии во второй раз. Подскажите почему так происходит?

Answer 1

[Pavel K]

Всё работает, проблема в другом месте.
https://jsfiddle.net/oujrwn4y/