Jquery 分离耦合相同的图元并仅插入一个

我在一个页面上有三个相同的表单，其中有三个相同的按钮。我想移动此按钮（用于创建每个表单的另一个设计）。 问题是当使用“detach（）”然后使用“insertAfter（）”-我在每个表单中都有三个按钮。但我只需要一个按钮在一种形式

这是我的HTML：

<form action="">
<p>
    <input type="text" class="text">
</p>
<p>
    <input type="checkbox"> unsubscribe
</p>
<div class="button">
    <input type="submit">   
</div>

我所拥有的：

<form action="">
<p>
    <input type="text" class="text">
    <div class="button">
        <input type="submit" />     
    </div>
    <div class="button">
        <input type="submit" />     
    </div>
    <div class="button">
        <input type="submit" />     
    </div>
</p>
<p>
    <input type="checkbox"> unsubscribe
</p>

退订

这里是结果

---

它不起作用。我可能想错了…

如果您提供一个链接来复制代码，那将很有帮助。如果我理解您的问题，您需要为每个表单分配一个id，并只向您要添加的表单添加按钮。例如：$（“#formID selector”）.append（“HTML”）；是的，ID是解决方案。但是我使用Wordpress和这些表单-是小部件。。。ID是动态出现的。不清楚您期望的输出是什么..请发布期望的标记..为什么要在输入文本框后使用detach并重新插入button div元素..因为每个表单中有三个不同的.button元素，它循环三次，并在文本框后创建三个按钮和插入。我认为“分离线”没有任何用处，因为您以后不会使用它

<form action="">
<p>
    <input type="text" class="text">
    <div class="button">
        <input type="submit" />     
    </div>
    <div class="button">
        <input type="submit" />     
    </div>
    <div class="button">
        <input type="submit" />     
    </div>
</p>
<p>
    <input type="checkbox"> unsubscribe
</p>