javascript - JQuery，通过不使用表单列表的按钮创建表单输入

Question

所以我有这个基本的 Bootstrap 表单，我有一个名为添加另一个位置的按钮，它将动态创建另外 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:第一个添加位置的 fiddle 没有创建新的输入，但它适用于我的本地。可能是外部资源问题

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:也检查这个片段。我相信这会对你有所帮助。 <强> View DEMO

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