使用jQuery，我怎么可以克隆形式的元素，并增加了克隆元素的名称和ID？

Question

我知道有很多关于这个话题上栈的问题，但我不能让我的特定问题的工作。我看这个问题：jquery increment id and name of children within appended rows

并用其中提供的代码，但我不能让我的示例工作。我有一个小提琴在这里：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();
});

我这个代码遇到的问题：

1. 克隆使克隆代码.work-experience div中。我需要它去它下面和它外面。 （我尝试使用.insertAfter代替.append，这让整个DIV消失出于某种原因。）
2. 每个输入的实际名称和id属性没有得到添加到他们的数字。我需要一个-1，-2，-3等等添加到名称和每个输入的ID。在克隆的div。

感谢您的帮助，您可以给。我不是擅长的jQuery（明显），但我需要得到这个解决。

Answer 1

非常感谢@Taplar指着我在正确的方向。

我有2个问题，我的代码：

1. 我没有“_Name1”我的名字或ID属性。 jQuery的一直在寻找，但没有找到它这就是为什么它没有增加。
2. 我使用的是过时的方法 - size() - 这是导致错误。我改成了length和它的工作！

新小提琴：https://jsfiddle.net/32r8z6xs/