Javascript 克隆div并获取特定id'；div中的s值

我有一个html，允许我添加或删除行数（div），还有一个按钮，允许我读取行数（div） 因此，行如下所示

<div id="mainContent">
            <div id="StaffRow" class="WorkItemRow row" display:none;">
                <div id="selections">
                    <select class="form-control">
                        <option value=""></option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                </div>
                <div>
                    Name
                </div>
                <div>
                    <input id="MemberName" type="text" value="">
                </div>
                <div>
                    Mail
                </div>
            <div>
                <input type="text" id="Mail" value="">
            </div>


    </div>

但现在的问题是，我似乎无法迭代创建的staffrow并获取数据

我已经尝试获取数据，但它返回未定义的数据

    for (let i = (counters- 1) ; i >= 0; i--) {
        if (counters!= 1)
            var nameData= document.getElementById('StaffRow' + i).children("#MemberName").val();
        nameData= document.getElementById('StaffRow' + i);
        list.push(nameData);
    }

你知道我应该在哪里完成我想要的吗

---

因此，我想做的是迭代创建的staffrow，该staffrow是在按下按钮并获取每一行中membername的值后创建的

.attr('id', "#StaffRow" + staffCount)

当你这么做的时候，你实际上用夏普设置了一个id。此函数的第二个参数不是选择器类型。然后在不使用此夏普的情况下执行document.getElementById

你应使用：

.attr('id', "StaffRow" + staffCount)

---

也许下面的内容会对你有所帮助，如果你需要更多帮助，请告诉我

此代码不依赖于id，而是使用名为

x-role

的用户定义属性来指示此元素在程序中的角色

document.querySelector（“#buttonadstaff”）.addEventListener(
“点击”，
职能（e）{
const newRow=document.querySelector（“#StaffRow”）.cloneNode（true）；
//删除id，dom中没有两个相同的id应该相同
newRow.removeAttribute（“id”）；
//设置x-role属性，可以先在隐藏位置设置，但
//获取getAllStaffRows中的所有行时必须使用.slice（1）
setAttribute（“x角色”、“staffrow”）；
//显示行
newRow.style.display=“”；
document.querySelector（“#mainContent”）.append（newRow）；
}
);
//继续转到父级，直到到达文档或函数传入为止
//返回true
const getParentUntil=fn=>el=>{
if（el==document.body）{
返回false；
}
if（fn（el））{
返回el；
}
//继续呼叫自己，直到找到正确的家长
//或者直到我们达成协议
返回getParentUntil（fn）（el.parentElement）；
}
//移除处理程序
document.getElementById（“mainContent”）.addEventListener(
“点击”，
e=>{
if（例如target.getAttribute（“x角色”）=“删除”）{
const staffRow=getParentUntil（x=>x.getAttribute（“x-role”）==“staffRow”）（e.target）；
国际单项体育联合会（斯塔夫罗）{
staffRow.remove（）；
}
}
}
)
document.querySelector（“#logdata”）.addEventListener(
“点击”，
职能（e）{
console.log(
JSON.stringify(
getAllStaffRows（），
未定义，
2.
)
)
}
);
常量getAllStaffRows=（）=>
//获取具有staffrow的x角色属性的所有html元素
from（document.querySelectorAll（`x-role='staffrow']`））
//将行元素映射到包含输入值的对象中
.地图(
行=>({
//查找具有membername值的x-role属性的元素
名称：row.querySelector（`[x-role='membername']`）。值，
//对选择和邮件也执行此操作
选择：row.querySelector（`[x-role='selections']`）。值，
mail:row.querySelector（`[x-role='mail']`）.value
})
);

1.
2.
3.
名称
邮寄
id
HTML文档中元素的id应该是唯一的，那么在jsfiddler上进行演示如何？我觉得一切都很好。
.attr('id', "StaffRow" + staffCount)