Javascript jQuery clone（）正在附加到多个元素，而不仅仅是一个元素

我想创建包装到div中的可克隆表单字段。我可以克隆元素，但问题是，如果我有多个类似字段组，它会将字段添加到所有其他组中，而不是仅添加到我单击的按钮的组中

如何仅克隆当前

$（this）

元素的字段而不克隆其他元素的字段

let cloneInput=$（'.clonedInput'）；
设btnAdd=$（'.btnAdd'）；
设btnDel=$（'.btnDel'）；
btnAdd.on（'click'，函数（事件）{
$（this）.parent（）.sides（'.gs customer form group'）.children（）.last（）.clone（）.appendTo（'.gs customer form group'）；
});
.gs客户字段框{
背景色：#fff；
宽度：300px；
保证金：自动；
字体系列：无衬线
}
.gs客户btn组{
利润率：20px0；
显示器：flex；
证明内容：之间的空间；
}
B.恩德尔先生{
颜色：红色；
光标：指针；
}
.btnAdd{
颜色：绿色；
光标：指针；
}
.主动{
背景颜色：黄色；
填充：20px；
}

添加客户详细信息
删除
添加

添加客户详细信息
删除
添加
问题是由于
.appendTo（'.gs customer form group'）
调用造成的。这会将克隆的内容追加到每个
.gs customer form group
元素中。您只需附加到与单击的
span
相关的文件。您已经从
同级（）
中引用了该元素，因此可以将其放入变量中供以后使用：


let cloneInput=$（'.clonedInput'）；
设btnAdd=$（'.btnAdd'）；
设btnDel=$（'.btnDel'）；
btnAdd.on（'click'，函数（事件）{
让$group=$（this.parent（）.sides（'.gs customer form group'）；
$group.children（）.last（）.clone（）.appendTo（$group）；
});
.gs客户字段框{
背景色：#fff；
宽度：300px；
保证金：自动；
字体系列：无衬线
}
.gs客户btn组{
利润率：20px0；
显示器：flex；
证明内容：之间的空间；
}
B.恩德尔先生{
颜色：红色；
光标：指针；
}
.btnAdd{
颜色：绿色；
光标：指针；
}
.主动{
背景颜色：黄色；
填充：20px；
}

添加客户详细信息
删除
添加

添加客户详细信息
删除
添加
您可以这样做：


let cloneInput=$（'.clonedInput'）；
设btnAdd=$（'.btnAdd'）；
设btnDel=$（'.btnDel'）；
btnAdd.on（'click'，函数（事件）{
$（this）.parent（）.sides（'.gs客户表单组'）.children（）.last（）.clone（）.appendTo（$（this）.parent（）.sides（'.gs客户表单组'））；
});
.gs客户字段框{
背景色：#fff；
宽度：300px；
保证金：自动；
字体系列：无衬线
}
.gs客户btn组{
利润率：20px0；
显示器：flex；
证明内容：之间的空间；
}
B.恩德尔先生{
颜色：红色；
光标：指针；
}
.btnAdd{
颜色：绿色；
光标：指针；
}
.主动{
背景颜色：黄色；
填充：20px；
}

添加客户详细信息
删除
添加

添加客户详细信息
删除
添加
感谢您的快速帮助。就我所知，这是唯一的方法，或者有没有更强大的广告优化方法来做到这一点？如果没有，那我就按你的方式去做。@CodeLover就我所知，这是唯一的方式。我不知道如何优化它，因为它根据单击的按钮选择.gs客户表单组。我明白了。我不是jQuery方面的专家，所以我只是想学习更好的方法。