Javascript 将元素追加到克隆的元素

我有一个带有HTML表格的表单，它有一个按钮

（#addRows）

，单击该按钮将克隆第一个表格行并将其附加到表格底部

此表位于HTML的一个部分中，其他一些输入字段也可以克隆并附加到表单底部。克隆节时，我会更改所有子元素ID，以包含一个数字，该数字可以根据用户克隆节的次数进行迭代

范例

<div id="someID"> ... </div>
<div id="someID2"> ... </div>
<div id="someID3"> ... </div>

当我克隆保存表格的部分时，我还克隆了

#addRows

按钮，单击该按钮时，应将表格行附加到正在单击的表格中。但是，如果我克隆我的分区并单击第二个`#addRows按钮，它将克隆我的表行，但它将附加到我的第一个表，而不是第二个表

这是我的

addRows

按钮和事件处理程序

<input type="button" value="+" id="addRows" class="addRows"/>

$(function() {
    var $componentTB = $("#component_tb"),
        $firstTRCopy = $("#row0").clone();
        $idVal = 1;
        $(document).on('click', '.addRows', function(){
            var copy = $firstTRCopy.clone(true);
            var newId = 'row' +$idVal;
            copy.attr('id', newId);
            $idVal += 1;
            copy.children('td').last().append("<a href=\"javascript:remove('" + newId + "')\">Remove</a>");
            $componentTB.append(copy);
        });
});

$（函数（）{
变量$componentTB=$（“#component_tb”），
$firstTRCopy=$（“#row0”）.clone（）；
$idVal=1；
$（文档）.on（'单击'，'.addRows'，函数（）{
var copy=$firstTRCopy.clone（true）；
var newId='row'+$idVal；
copy.attr（'id'，newId）；
$idVal+=1；
copy.children（'td'）.last（）.append（“”）；
$componentTB.append（副本）；
});
});

我的问题是，当我克隆包含我的表和

#addButton

的HTML部分时，如何确保当用户单击原始按钮时，它将克隆并附加到该表或如果我单击克隆按钮，它将仅克隆并附加到克隆表

如果有什么不清楚的地方，请让我知道，这样我就可以更好地解释我想做什么，谢谢

---

这里有一个例子来证明我的问题。

因为我真的爱你，大兔子，这里是我要做的。您将在此处看到至少一个有用的修复程序：

    var $sectionClone = $section.clone(true);
    $sectionClone.find("*[id]").andSelf().each(function () {
        $(this).attr("id", $(this).attr("id") + $cloneID);
    });

以及对您尚未报告的问题的修复

$copy.children('td').last().append(' <a href="#" class="remove" data-removeid="'+newId + '">Remove</a>');

$（函数（）{
变量$componentTB=$（“#component_tb”），
$firstTRCopy=$（“#row0”）.clone（），
$section=$（“#facility_section_info>fieldset”）.clone（），
$cloneID=0，
$idVal=0；
$（“#设施"部分"信息”）。在（'click'，'remove'，函数（e）{
e、 预防默认值（）；
$（“#”+$（this.data（“removeid”））.remove（）；
});
$（“#设施#部分#信息”）。在（'click'，'addRows'，函数（）{
$idVal++；
var$copy=$firstTRCopy.clone（true）；
var newId='row'+$idVal；
$copy.attr（'id'，newId）；
$copy.children（'td'）.last（）.append（''）；
$（this）.closest（“fieldset”）.find（“tbody”）.append（$copy）；
});
$（“#设施#分区(信息”）。在（“单击”、“.addSection”上，函数（）{
$cloneID++；
var$sectionClone=$section.clone（true）；
$sectionClone.find（“*[id]”）和SELF（）.each（函数（）{
$（this.attr（“id”），$（this.attr（“id”）+$cloneID）；
});
$（“#设施(部分)信息”）。追加（$sectionClone）；
});
});

是的，如果您能在一个简单的时间内复制该问题，那就太好了JSFiddle@ArinCool补充道jsfiddle@BigRabbit如果你已经有了问题链，为什么要添加新的问题？@nirmal读了这个问题，你会注意到我只处理一个表，我刚刚添加了第二个表，并且有一个单独的问题。还请注意我是如何删除新问题的？；）谢谢你过来，我也爱你。我感谢额外的，但我已经有了一个解决我的删除链接，但我更喜欢你的解决方案。我注意到当我在你的小提琴上点击add部分时，它克隆了表两次，我如何修复它？我确实看到当我点击

+

按钮时，我确实将行添加到了正确的表中，并且删除了：）谢谢，我是一个非常感激的孩子：）是的，这就是我的想法，这里有很多新东西，所以我很难解决这个问题，但我会继续尝试，如果你碰巧发现了什么，请让我知道，再次感谢。啊，我有两个字段集。-更改为

$section=$（“#facility_section_info>fieldset”）.clone（）

$copy.children('td').last().append(' <a href="#" class="remove" data-removeid="'+newId + '">Remove</a>');

$("#facility_section_info").on('click', '.remove', function (e) {
    e.preventDefault();
    $("#"+$(this).data("removeid")).remove();
});

$(function () {
    var $componentTB = $("#component_tb"),
        $firstTRCopy = $("#row0").clone(),
        $section = $("#facility_section_info>fieldset").clone(),
        $cloneID = 0,
        $idVal = 0;

    $("#facility_section_info").on('click', '.remove', function (e) {
        e.preventDefault();
        $("#"+$(this).data("removeid")).remove();
    });

    $("#facility_section_info").on('click', '.addRows', function () {
        $idVal++;
        var $copy = $firstTRCopy.clone(true);
        var newId = 'row' + $idVal;
        $copy.attr('id', newId);
        $copy.children('td').last().append(' <a href="#" class="remove" data-removeid="'+newId + '">Remove</a>');
        $(this).closest("fieldset").find("tbody").append($copy);
    });

    $("#facility_section_info").on("click", ".addSection", function () {
        $cloneID++;
        var $sectionClone = $section.clone(true);
        $sectionClone.find("*[id]").andSelf().each(function () {
            $(this).attr("id", $(this).attr("id") + $cloneID);
        });
        $('#facility_section_info').append($sectionClone);

    });
});