Javascript 克隆的元素不显示在底部

这应该是一个非常简单的问题。我有一个输入和一个按钮。我的目标是，当我单击该按钮时，将出现该输入元素的克隆。我无法修复的是，当我单击按钮时，克隆元素仅显示在原始元素之后，但它应该显示在所有克隆元素的底部

$（文档）.ready（函数（）{
//添加按钮处理程序
$（“.btn添加”）。在（“单击”，函数（）{
var id=$（this.attr（“id”）；
var operation=id.split（'-'）[0]。替换（/（？：^）\w/g，函数（匹配）{
返回match.toUpperCase（）；
});
//$（“#”+操作）.first（）.clone（）.val（“”）.insertAfter（“#”+操作+”：last”）；
//$（“#”+operation+”：last”）。之后（$（“#”+operation.first（）.clone（）.val（“”）；
$（“#”+操作）.last（）.after（$（“#”+操作）.first（）.clone（）.val（“”）；
});
}); 

+
TL；博士
为此使用
class
而不是
id

细节
id
值在页面上必须是唯一的。当您打破这一规则时，浏览器可以自由地对后续元素执行任何他们想要的操作。他们的共识似乎是将
id
留给使用它的后续元素，但不依赖于此

如果它们这样做（将
id
保留在后续元素上），
$（“#id”）
将返回一个jQuery对象，仅包装第一个对象：


console.log（$（“#id”）.length）；//1

TL；博士
为此使用
class
而不是
id

细节
id
值在页面上必须是唯一的。当您打破这一规则时，浏览器可以自由地对后续元素执行任何他们想要的操作。他们的共识似乎是将
id
留给使用它的后续元素，但不依赖于此

如果它们这样做（将
id
保留在后续元素上），
$（“#id”）
将返回一个jQuery对象，仅包装第一个对象：


console.log（$（“#id”）.length）；//1

下一次，请在此处使用堆栈片段（使用
[]
工具栏按钮）而不是场外创建可运行的示例。下一次，请在这里使用堆栈片段（
[]
工具栏按钮）而不是场外创建可运行的示例。