Javascript 如何克隆jquery中的两个不同项并将其放置在各自的位置

我有一个div和一个关闭该div的按钮。我将分别克隆它们，并为它们分配一个唯一的递增id。一切都在进行中，克隆发生了，按钮关闭了Div。 我有一个问题，虽然关于按钮的位置。我希望按钮相对于其克隆的div始终处于相同的位置。有什么办法吗

HTML

其中一种方法是jqueryoffset

---

如果正确解释问题，请尝试使用

.appendTo（）

，

.insertAfter（$（“#btn”+cloneCount））

var cloneCount=0，cloneCount2=0；
函数duplicateDiv（）{
//关闭按钮
$（“btn”）
.clone（）.attr（“id”，函数（ux，id）{
返回id+（++cloneCount2）
})
.附件（“正文”）
$（“#id”）
.clone（）.attr（“id”，函数（ux，id）{
返回id+（++cloneCount）
})
.insertAfter（$（“#btn”+cloneCount））
//清除新克隆的div中的输入项
$（“#id”）.find（“输入”）.val（“”）；
}
函数hideDiv（obj）{
var currentId=$（obj.attr（'id'）；
var divId=当前id.replace（“btn”、“id”）；
$（“#”+divId）.hide（）；
$（“#”+currentId）.hide（）；
}

div

显示一些HTML如果您需要HTML方面的帮助（并且您确实需要）做一个JSFIDLE并发布它，我们将能够从那里帮助您，因为我们将能够看到您尝试做的事情，然后向您展示一个工作示例。这就像一个魔咒一样，完全按照我的希望进行。

<a href="#" class="button" onclick="hideDiv(this)" id="btn">X</a>
<div id="id"></div>
<a href="#" onclick="duplicateDiv()">Add</a>

function duplicateDiv(){ 
    $('#btn').clone().attr('id', 'btn'+ cloneCount2++).insertBefore($('[id^=id]:first'));

    $('#id').clone().attr('id', 'id'+ cloneCount++).insertAfter($('[id^=id]:first'));

    //clearing the input items in the new cloned div
    $("#id").find("input").val("");     
}


function hideDiv(obj){
    var currentId = $(obj).attr('id');
    var divId = currentId.replace("btn", "id");
    $("#"+divId).hide();
    $("#"+currentId).hide();
}

var destination = $('.original-content').offset(); // get position of original
$('.original-content').hide(); // hide original
$('.cloned-content').css({top: destination.top, left: destination.left}); // set position of cloned