Javascript 在同一HTML中向两个不同的表动态添加行

我正在努力向两个不同的表动态添加行。虽然它对第一个表很有效，但我无法对第二个表进行相同的复制。我知道这可能与JS有关，但我无法找出确切的错误

因为不能对不同的元素使用相同的id，所以我在JS中更改了id。我应该使用class而不是id吗？如果是这样的话，我该怎么做呢

$（文档）.ready（函数（）{
$（“#添加#徽章”）。在（“单击”，函数（）{
//动态行代码
//获取最大行id并设置新id
var-newid=0；
$.each（$（“#tab_logic tr”），函数（）{
if（parseInt（$（this.data（“id”））>newid）{
newid=parseInt（$（this）.data（“id”）；
}
});
newid++；
var tr=$（“”{
id:“地址”+新id，
“数据id”：newid
});
//循环遍历每个td并创建名为newid的新元素
$。每个（$（“#tab#u逻辑体tr:n（0）td”），函数（）{
var cur_td=$（本）；
var children=cur_td.children（）；
//添加新的td和元素（如果有nane）
if（$（this）.data（“name”）！=未定义）{
var td=$（“”{
“数据名称”：$（cur_td）.data（“名称”）
});
var c=$（cur_td）.find（$（children[0]）.prop（'tagName'））.clone（）.val（“”）；
c、 属性（“名称”），$（cur_td）.data（“名称”）+newid）；
c、 附件(元);；
td.附件(元(tr);；
}否则{
var td=$（“”{
“text”：$（“#tab_logic tr”）。长度
})。附件（$（tr））；
}
});
//添加删除按钮和td
/*
$（“”）。附加(
$("")
。单击（函数（）{
$（this）.tr.remove（）；
})
)。附件（$（tr））；
*/
//添加新行
$（tr）.appendTo（$（'tab#u logic'）；
$（tr）.find（“td-button.row-remove”）.on（“单击”，函数（）{
$（this）.tr.remove（）；
});
});
//可排序代码
var FIXHELPERMODIFED=函数（e，tr）{
var$originals=tr.children（）；
var$helper=tr.clone（）；
$helper.children（）.each（函数（索引）{
$（this）.width（$originals.eq（index.width（））
});
返回$helper；
};
$（“.table sortable tbody”）.sortable({
帮助者：修改的fixHelperModified
}).disableSelection（）；
$（“.table可排序thead”）.disableSelection（）；
$（“添加徽章”）。触发（“单击”）；
});
$（文档）.ready（函数（）{
$（“添加层”）。在（“单击”，函数（）上{
//动态行代码
//获取最大行id并设置新id
var-newid=0；
$.each（$（“#tab_logic tr”），函数（）{
if（parseInt（$（this.data（“id”））>newid）{
newid=parseInt（$（this）.data（“id”）；
}
});
newid++；
var tr=$（“”{
id:“地址”+新id，
“数据id”：newid
});
//循环遍历每个td并创建名为newid的新元素
$。每个（$（“#tab#u逻辑体tr:n（0）td”），函数（）{
var cur_td=$（本）；
var children=cur_td.children（）；
//添加新的td和元素（如果有nane）
if（$（this）.data（“name”）！=未定义）{
var td=$（“”{
“数据名称”：$（cur_td）.data（“名称”）
});
var c=$（cur_td）.find（$（children[0]）.prop（'tagName'））.clone（）.val（“”）；
c、 属性（“名称”），$（cur_td）.data（“名称”）+newid）；
c、 附件(元);；
td.附件(元(tr);；
}否则{
var td=$（“”{
“text”：$（“#tab_logic tr”）。长度
})。附件（$（tr））；
}
});
//添加删除按钮和td
/*
$（“”）。附加(
$("")
。单击（函数（）{
$（this）.tr.remove（）；
})
)。附件（$（tr））；
*/
//添加新行
$（tr）.appendTo（$（'tab#u logic'）；
$（tr）.find（“td-button.row-remove”）.on（“单击”，函数（）{
$（this）.tr.remove（）；
});
});
//可排序代码
var FIXHELPERMODIFED=函数（e，tr）{
var$originals=tr.children（）；
var$helper=tr.clone（）；
$helper.children（）.each（函数（索引）{
$（this）.width（$originals.eq（index.width（））
});
返回$helper；
};
$（“.table sortable tbody”）.sortable({
帮助者：修改的fixHelperModified
}).disableSelection（）；
$（“.table可排序thead”）.disableSelection（）；
$（“添加层”）。触发（“单击”）；
});

window.jQuery | | document.write（“”）
徽章名称
徽章ID
获得徽章所需的积分
创建新徽章
层名称
层ID
获得该级别所需的积分
创建新层
您已经使用了
id=“tab_logic”
两次，请使用diff类。
您必须为表使用不同的id选择器作为
对于第一个表
id=“tab\u logic1”
和第二个表id=“tab\u logic”

必须创建
函数addRows（选择器，数据）{}
并使用：

addRows('tab_logic1',data);
addRows('tab_logic2',data);

也不要复制相同的代码。更好地使用函数。在html页面上不能有相同的id。请改用类或使用其他id