Javascript 图标克隆元素位于错误的位置

当我单击

输入1

旁边的

+

时，一行被克隆，第一行旁边出现一个

-

，这正是我想要的：-）

但是当我按下

输入2

旁边的

+

时，

-

图标出现在

输入1

行旁边

我不知道我做错了什么，因为当您单击

+

输入2旁边的

-

时，我希望

-

位于

输入2

的第一行旁边

$（函数（）{
$（文档）.on（'click'，'btn add'，函数（e）{
e、 预防默认值（）；
var controlForm=$（'.controls-form:first'），
currentEntry=$（this）.parents（'.entry:first'），
newEntry=$（currentEntry.clone（））.appendTo（controlForm）；
newEntry.find（'input'）.val（''）；
controlForm.find（'.entry:not（：last）.btn add'）
.removeClass（'btn-add'）。addClass（'btn-remove'））
.removeClass（'btn-success'）.addClass（'btn-danger'））
.html（'-'）；
}).on（'click'，'btn remove'，函数（e）{
$（this）.parents（'.entry:first'）.remove（）；
e、 预防默认值（）；
返回false；
});
});
.entry{
文本对齐：左对齐；
边缘底部：25px；
边缘顶部：25px；
}
.输入{
高度：50px；
填充：10px；
}
.条目输入：第n个子项（2）{
左边距：25px；
宽度：66%
}

+
+
var-controlForm=$（'.controls-form:first'）//在这里，即使您使用的是第二个controlforms，也可以选择第一个控件

因此，将其替换为

var controlForm=$（this）.closest（'.controls'）.find（'form:first'）//这也是选择最近的一个
$（函数（）{
$（文档）.on（'click'，'btn add'，函数（e）{
e、 预防默认值（）；
var controlForm=$（this）.closest（'.controls'）.find（'form:first'），//您必须选择colsest控件
currentEntry=$（this）.parents（'.entry:first'），
newEntry=$（currentEntry.clone（））.appendTo（controlForm）；
newEntry.find（'input'）.val（''）；
controlForm.find（'.entry:not（：last）.btn add'）
.removeClass（'btn-add'）。addClass（'btn-remove'））
.removeClass（'btn-success'）.addClass（'btn-danger'））
.html（'-'）；
}).on（'click'，'btn remove'，函数（e）{
$（this）.parents（'.entry:first'）.remove（）；
e、 预防默认值（）；
返回false；
});
});
.entry{
文本对齐：左对齐；
边缘底部：25px；
边缘顶部：25px；
}
.输入{
高度：50px；
填充：10px；
}
.条目输入：第n个子项（2）{
左边距：25px；
宽度：66%
}

+
+
该死，我没注意到。谢谢Mithu CN