Есть форма, которую по клику нужно продублировать при этом очистить поля предыдущей формы. Как это правильно сделать?
<form id="newCalendar" class="form-horizontal bordered-row responsive" data-toggle="validator" novalidate="true">
<div class="napr">
<div class="clone">
<div class="form-group dashed">
<label for="daterangepicker-dateFrom" class="col-sm-1 control-label">
Дата
</label>
<div class="col-sm-3 err">
<div class="input-prepend input-group">
<span class="add-on input-group-addon">
<i class="far fa-calendar-alt"></i>
</span>
<input type="text" name="daterangepicker-dateFrom"
class="form-control daterangepickerTime"
placeholder="Выберите дату" required>
</div>
</div>
<label for="directionFrom" class="col-sm-1 control-label">
Направление откуда
</label>
<div class="col-sm-3 err">
<div class="input-prepend input-group">
<span class="add-on input-group-addon">
<i class="fas fa-plane-departure"></i>
</span>
<input type="text" name="directionFrom"
class="form-control direction-from"
placeholder="Выберите направление" required>
</div>
</div>
<label for="codeAirportsFrom" class="col-sm-1 control-label">
Код аэропорта
</label>
<div class="col-sm-3 err">
<div class="input-prepend input-group">
<span class="add-on input-group-addon">
<i class="far fa-building"></i>
</span>
<input type="text" name="codeAirportsFrom"
class="form-control code-airports"
placeholder="Введите код аэропорта" required>
</div>
</div>
</div>
<div class="form-group dashed">
<label for="aviaCompany" class="control-label col-sm-1">
Авиакомпания
</label>
<div class="col-sm-3 err">
<select name="aviaCompany" class="chosen-select aviaCompany"
data-placeholder="Выберите авиакомпанию">
<option value=""></option>
</select>
</div>
<label for="directionTo" class="col-sm-1 control-label">
Направление куда
</label>
<div class="col-sm-3 err">
<div class="input-prepend input-group">
<span class="add-on input-group-addon">
<i class="fas fa-plane-arrival"></i>
</span>
<input type="text" name="directionTo"
class="form-control direction-to"
placeholder="Введите направление куда" required>
</div>
</div>
<label for="codeAirportsTo" class="col-sm-1 control-label">
Код аэропорта
</label>
<div class="col-sm-3 err">
<div class="input-prepend input-group">
<span class="add-on input-group-addon">
<i class="far fa-building"></i>
</span>
<input type="text" name="codeAirportsTo"
class="form-control code-airports"
placeholder="Введите код аэропорта" required>
</div>
</div>
</div>
<div class="form-group dashed">
<div class="add-pass">
<label for="addPassenger" class="col-sm-1 control-label">
Фио пассажира
</label>
<div class="col-sm-3 err">
<div class="input-prepend input-group">
<span class="add-on input-group-addon">
<i class="fas fa-user"></i>
</span>
<input type="text" name="addPassenger" class="form-control addPassenger"
placeholder="ФИО пассажира" required>
<span class="add-on input-group-addon">
<a class="add-passenger">
<i class="fas fa-plus"></i>
</a>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="add-new-direction">
<button type="button" class="btn btn-info add-direction-button">
Добавить направление
</button>
</div>
</div>
</form>
// add direction
$('.add-direction-button').on('click', function () {
let clone = $(this).closest('.napr').find('.clone').first().clone();
clone.appendTo('.napr');
$('.chosen-container-single:last').remove();
getAirsCompany();
getDateRange();
$(this).closest('.napr').find('.clone:last').append('<button type="button" class="btn btn-danger remove-direction"><?= lang("remove_direction")?></button>');
// delete direction
$('.remove-direction').on('click', function () {
$(this).closest('.clone').remove();
})
});
Или лучше использовать append ?
И еще вопрос. Как быть с одинаковыми именами? Так понимаю нужно как то динамически изменять?
