使用 jQuery，如何克隆表单元素并增加克隆元素的名称和 ID？

Question

我知道 Stack 上有很多关于这个主题的问题，但我无法解决我的具体问题。我看过这个问题：jquery increment id and name of children within appended rows

并使用了此处提供的代码，但我的示例无法运行。我这里有一个 fiddle：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">&nbsp;</a>
        <a href="#" class="remove-work-exp">&nbsp;</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（很明显），但我需要解决这个问题。

Answer 1

非常感谢@Taplar 为我指明了正确的方向。

我的代码有 2 个问题：

我的名字或 ID 属性中没有“_Name1”。 jQuery 一直在寻找但找不到，这就是它没有递增的原因。
我使用的是已弃用的方法 - size() - 这导致了错误。我将其更改为 length 并且有效！

新fiddle：https://jsfiddle.net/32r8z6xs/

使用 jQuery，如何克隆表单元素并增加克隆元素的名称和 ID？

Using jQuery, how can I clone forms elements and increment the name and id of the cloned elements?

jquery

clone

increment