Javascript 如何使用HTML中的同一表单在页面的不同位置显示onclick

我正在尝试创建一个评论流，就像在Reddit上使用HTML/jQuery一样

我已经有了主帖子回复按钮的评论表单，就像我想要的那样工作，现在我希望对所有子评论回复按钮使用相同的表单

我尝试使用inserAfter使用下面的jQuery代码来实现这一点，但它只起到了部分作用，即当我单击任何子注释的回复按钮时，注释表单为最后一个子注释显示一次，然后当我单击两次时，注释表单为所有子注释显示一次

下面是我的jQuery-

$(".comment-box-link, .comment-box").on('click', function(e) {
    $('.new-topic-wrapper').slideToggle('fast');

    if ($(".new-topic-wrapper").is(':visible')) {
        $("html, body").animate({ scrollTop: $(".new-topic-wrapper").offset().top - 50 }, 'fast');
    }
});
$('.comment-box').click(function(e) {
    $('.new-topic-wrapper').show().insertAfter('.comment-bottom');
});

---

您可以通过AJAX在div中加载页面html内容

$.ajax({
    url: 'html_file.html',
    type: 'POST',
    dataType: 'html',

})
.done(function(result) {
    $("#output").html(result);
});

尝试使用ajax在页面中加载html-

---

您需要限制附加到单个注释包装器的函数。找到所单击按钮的相应祖先，然后在所需元素后附加：

$('.comment-box').click(function(e) {
    $('.new-topic-wrapper').show().insertAfter($(this).closest('.single-comment-wrapper').find('.comment-bottom'));
});

---

请参阅：

您能创建JSFIDLE或PLUNK吗？添加代码笔链接一些用于上下文的HTML会很有帮助，a会更好。