Javascript 使用子元素和按钮复制分区

我是堆栈溢出新手，如果我不能很好地表达我的问题或正确地显示我的代码，我感到非常抱歉。正在做一个家庭作业，我必须创造一个像经典的智囊团一样的游戏。我设计了游戏板，创建了一个“第一轮”分区，可以切换颜色按钮、提交按钮，甚至可以调用正确的结果图像（白点和黑点组合为img png）

我的js代码复制回合如下。我的问题是把整轮和所有功能重复9次。我想在提交一轮后禁用该轮的切换颜色按钮，并且我需要为该轮的标题以及结果图像将出现的div分配一个新id（因为随着每次新猜测而改变）。但无论我尝试什么（将所有代码生成为字符串并附加到正文中），我能得到的最好结果是10轮，但只有第1轮的功能。所有类和ID都是相同的，所以应该应用相同的事件处理程序和jQuery链接，是吗

感谢任何人、任何帮助或建议

用于创建回合的脚本代码-

 const nextRound = '
<div id="Round" class="level">
  <h3 class="title"></h3>
  <div class="buttondisplay">
    <a id="boxa" class="button" class="active"></a>
    <a id="boxb" class="button" class="active"></a>
    <a id="boxc" class="button" class="active"></a>
    <a id="boxd" class="button" class="active"></a>
  </div><a id="submit" class="submitter">SUBMIT</a>
  <div id="res1" class="results"></div>
</div>'; 

const buildRounds = () => { for (i = 1; i <= 10; i++){ 
    $('#Gameboard').append(nextRound); }
}

const nextrond='1〕
提交
'; 
const buildRounds=（）=>{for（i=1；i问题
每个页面的id必须是唯一的。您总共有6个不同的id，每个id都有10个副本。jQuery/JavaScript只需要一个
#Round
，或者它需要一个
#boxc
，因此一旦找到id，它就会停止，所有其他副本都会被忽略，或者更糟糕的是，不会完全忽略。基本上，当您的id超过如果有一个元素共享一个id，那么很可能会得到不想要的结果（如果有的话）。因此，必须使每个id唯一，一种常见的方法是在循环过程中为每个id分配一个数字（即
“Round”+i
）

顺便说一句，元素也不能有任何重复的属性

详细信息将在演示中进行注释

使用DevTools检查页面，验证所有ID是否唯一。

添加了使用字符串文本而不是模板文本的演示2。IE不支持
因此演示2。
演示1--使用模板文本

//通过若干轮（即“数量”）
功能构建轮次（数量）{
/*用“let”声明“i”，将i限制为
||在“for”循环的范围内应用。
||此限制有助于“i”正确增加
||不受外部引用的影响
||循环的一部分。
*/
for（设i=1；i
<a id="boxd" class="button" class="active"></a> 

 <a id="boxd" class="button active"></a>