Javascript jQuery克隆，然后在多次克隆后插入

我试图创建一个动态表单，向业务合作伙伴演示

目标是能够在单击按钮时根据需要添加选择元素。但是，当它被单击时，它会复制模板两次，而不是一次

以下是我尝试过的代码的一些变体：

---

这个想法很简单，因为您使用的是

$（'select'）。material_select（）

启动所有

选择
元素（因此它是唯一的，克隆时可能会出现一些意外问题）

解决方案：

当您单击添加时，调用
$（'select'）。材料选择（'destroy'）
销毁并获取原始元素
现在您可以克隆它并附加
启动所有选择使用
$（'select'）。材料选择（）

（注意：由于克隆还将复制
id=“servicemplate”
，这是一种不好的做法，因为id应该是唯一的。请删除该id，并使用类似
$（“.serviceField”）.first（）的方法以原始元素为目标。）


$（文档）.ready（函数（）{
$（'select'）。材料选择（）；
});
$（“#addBtn”）。单击（函数（）{
$（'select'）。材料_select（'destroy'）；
$（“.serviceField”）.last（）.after（$（.serviceField”）.first（）.clone（））；
$（'select'）。材料选择（）；
});
*{
-webkit框大小：边框框；
-moz框大小：边框框；
-ms框尺寸：边框框；
框大小：边框框；
}
html，
身体{
保证金：0；
填充：0；
最小宽度：100%；
宽度：100%；
最大宽度：100%；
最小高度：100%；
身高：100%；
最大高度：100%；
}
形式{
填充：2rem0；
}
李娜{
填充：0.65rem；
}
导航，
#搜寻{
背景：#eee！重要；
}
.品牌标志h4{
颜色：#444；
}
.品牌标识：之前{
内容：“；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
z指数：99；
}
#桌子{
显示：无；
}

全名
预期预约日期
-请选择服务-
病毒清除-90美元
电脑调整-20美元
所需服务
添加其他服务
这其中有一个问题，那就是每次添加选择都会添加另一个
，在网页上使用非唯一ID是一种不好的做法。@PatrickRoberts感谢您的提示。是的，克隆也将复制id，尽管id只针对正在工作的DOM流中的第一个匹配项。但这不是正确的做法，我更新了使用class+.first（）来定位原始元素。哦，我没有看到更新，谢谢你指出这一点。我绝对赞同这种做法。谢谢你的回答。今晚晚些时候我会尝试这个。谢谢你提醒我身份证的事——我只是尽我所能让这件事更顺利。（：@RickYoder冷静，没问题
$("#serviceTemplate").eq(0).clone().insertAfter(".serviceField:last");

$("#serviceTemplate").clone().insertAfter(".serviceField:last");

$("#serviceTemplate").eq(0).clone().insertAfter($(".serviceField").last());