JQuery，通过按钮创建表单输入不适用于表单列表

Question

所以我有这个基本的引导表单，我有一个名为 add another location 的按钮，它将动态创建另外 4 个输入以添加更多位置。这是通过 jquery 和 jquery UI 实现的。所以我制作了这个表格的 3 个副本并将它们放在一个列表中，因为最终它们将来自服务器并循环该表格取决于可用的信息集。我遇到的问题是，只有我的第一个 add another location 按钮有效，并且它还在第二个和第三个按钮上创建额外的输入。我可以为新表单所在的按钮提供不同的 id/class，但这对我没有任何好处，因为可以通过服务器显示更多或更少的表单。我的问题是每个按钮如何在不给它不同的 id/class 的情况下独立行动。因此，如果我单击第二组表单上的 添加另一个位置 按钮，它只会在第二组而不是第一组或第三组上创建额外的输入，第一组和第三组相同。

这是克隆和附加新输入的 jquery 代码

    $("#pm-do-clone1").click(function () {

    $(".pm-clone-this3 .pm-clone4").clone().appendTo(".pm-clone-here1");
});

这是我的 jsfiddle：https://jsfiddle.net/jaisilchacko/yqvd4Lvv/4/ ps：第一个添加位置的小提琴没有创建新的输入，但它适用于我的本地。可能是外部资源问题

Answer 1

好吧，据我了解，您必须通过引用它来抓住单击的按钮；

 $("#pm-do-clone1").click(function () {
 $(this).//rest of the code

在我们捕获点击的代码的其余代码中，我们现在必须找到它的父级，我们将在其中添加新输入。例如，

var y = document.createElement('input');
var x =$(this).parents('.form');
$(x).append(y);

编辑：顺便说一句，您正在单击一个 ID，ID 不是从多个元素中捕获一个的最佳模型，因为它有时会出错，请改用类。

Edit2：也检查这个 sn-p。我相信这会对你有所帮助。 View DEMO

Edit3：为什么要将每个输入包装到 div 中？似乎没有必要创建太多元素，因为您只需输入即可获得相同的结果。