Я знаю, что в Stack есть много вопросов на эту тему, но я не могу заставить мою конкретную проблему работать.Я посмотрел на этот вопрос: Идентификатор приращения jquery и имя дочерних элементов в добавленных строках
И использовал предоставленный там код, но я не могу заставить свой пример работать.У меня есть скрипка: https://jsfiddle.net/af3z0kx5/2/
с использованием следующего HTML:
<main>
<form class="application">
<h3>Work Experience</h3>
<p class="note">Note: We check all references. Click the (+) or (-) buttons below to add or remove previous employment records.</p>
<div class="work-experience">
<div class="section group full">
<div class="col span_6_of_12">
<label for="fromdate">From (start date)</label>
<input type="date" id="fromdate" name="From-Date" />
</div>
<div class="col span_6_of_12">
<label for="todate">To (start date)</label>
<input type="date" id="todate" name="To-Date" />
</div>
</div>
<label for="workexp-employer">Employer's Name</label>
<input type="text" name="Work-Exp-Employer" id="workexp-employer" />
<label for="workexp-employer-address">Employer's Address</label>
<input type="text" name="Work-Exp-Employer-Address" id="workexp-employer-address" placeholder="Street Address, State, and ZIP"/>
<label for="workexp-employers-phone">Employer's Phone</label>
<input type="tel" name="Work-Exp-Employer-Phone" id="workexp-employers-phone" pattern="\d{3}[\-]\d{3}[\-]\d{4}" placeholder="ex. 123-456-7890" />
<label for="workexp-duties">Your Duties</label>
<textarea placeholder="Summarize" class="duties"></textarea>
<label for="workexp-supervisor">Supervisor's Name</label>
<input type="text" name="Work-Exp-Supervisor" id="workexp-supervisor" />
<div class="section group full">
<div class="col span_6_of_12">
<label for="starting-salary">Starting Rate/Salary</label>
<input type="text" id="starting-salary" name="Starting-Salary" />
</div>
<div class="col span_6_of_12">
<label for="ending-salary">Ending Rate/Salary</label>
<input type="text" id="ending-salary" name="Ending-Salary" />
</div>
</div>
<label for="workexp-leaving">Specific Reason for Leaving</label>
<input type="text" name="Work-Exp-Leaving" id="workexp-leaving" />
<hr />
</div>
<div class="control">
<a href="#" class="add-work-exp"> </a>
<a href="#" class="remove-work-exp"> </a>
</div>
</form>
</main>
И jQuery:
var i = $(".application .work-experience").length;
$(".add-work-exp").click(function(e) {
e.preventDefault();
var clonedRow = $(".work-experience").clone().find("input:text, textarea").val("").end();
i++;
$("*[name*='1']", clonedRow).attr('id', function() {
var attrval = $(this).attr("id");
attrval = attrval.replace(/\d/g, "");
while($('#' + attrval + i).size() > 0) {
i++;
}
return attrval + i;
}).attr('name', function() {
var attrval = $(this).attr("name");
attrval = attrval.replace(/\d/g, "");
return attrval + i;
});
$(".work-experience").append(clonedRow);
});
$(".remove-work-exp").click(function (e) {
e.preventDefault();
$("form .work-experience").last().remove();
});
Проблемы, с которыми я сталкиваюсь с этимкод:
- Клонирование помещает клонированный код внутри
.work-experience div.Мне нужно, чтобы это было ниже и вне этого.(Я попытался использовать .insertAfter вместо .append, и по какой-то причине весь div исчез по какой-то причине.) - Фактические имена и атрибуты id каждого ввода не получают число, добавленное к ним.Мне нужно добавить -1, -2, -3 и т. Д. К имени и идентификатору каждого входа в клонированном div.
Спасибо за любую помощь, которую вы можете оказать.Я не очень хорош в jQuery (очевидно), но мне нужно решить эту проблему.