jquery克隆未显示在我预期的位置

我有一个带有输入字段的表单，客户端可以单击位于字段底部的按钮“添加系统”。此函数将克隆id为“template”的div。到目前为止还不错

Existing Form
Existing Form
Existing Form
Cloned 3
Cloned 2
Cloned 1
Add a System Button

但我需要它做的是将克隆模板移动到“添加系统”按钮上方的最后一项：

Existing Form
Existing Form
Existing Form
Cloned 1
Cloned 2
Cloned 3
Add a System Button

其中克隆3是第三次单击按钮时模板将出现的位置。如果用户添加20个系统，按钮和字段甚至不会同时出现在屏幕上。我以前找过一个插件，但显然JavaScript中不存在

JS代码：

function AddNewSystem(){    
    alert('Adding new system');
    var CurrentLi = $('.template');
    CurrentLi.clone().insertAfter( $('#cloned') );
}

下面是一个例子，看看我在说什么。单击word模板出现处的“添加系统”按钮，将其更改为1（或2或3等），并至少重复3次。至此，您应该看到模板是如何插入的

有没有比我现在做的更好的克隆方法

我以前找过一个插件，但很明显，它不存在于 JavaScript

您正在使用jquery，它在之前插入了一个

您可以将它们直接附加到
#cloned

function Repeat()
  {
    var CurrentLi = $('.template').eq(0);
    CurrentLi.clone().appendTo('#cloned');
  }

*
p、 我把模板改成了课堂。总有一天你会遇到问题——2+个相同的ID元素
OMG。谢谢。：）真不敢相信我错过了。多亏了詹姆斯·蒙塔涅。我已经更新了JSFIDLE以反映更正后的函数。克隆ID不是一个好的做法，而是克隆类元素。我很确定在DOM中不需要20个同名ID。这很容易让你在以后遇到问题。我说的是一个打字错误。谢谢你接电话。我的小提琴是正确的。使用appendTo很有趣。一种方法比另一种好吗？
function Repeat()
  {
    var CurrentLi = $('.template').eq(0);
    CurrentLi.clone().appendTo('#cloned');
  }