Javascript 模板文字不适用于引导4可折叠项？

我在js中构建了一个模板文本，并将其传递给一个可折叠项。只有一些可折叠的部分在工作。知道为什么会这样吗

//为div id生成一个随机数
函数uuidv4（）{
返回“xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxx”。替换（/[xy]/g，函数（c）{
var r=Math.random（）*16 | 0，v=c='x'？r:（r&0x3 | 0x8）；
返回v.toString（16）；
});
}
//参展商
常数qaList=[
{ 
常见问题解答：uuidv4（），
问题：“项目1”，
回答：“Anim pariatur的陈词滥调reprehenderit，enim eiusmod high life accusamus terry richardson ad squid.3 wolf moon officia aute，非Cupidata滑板多洛早午餐。”
},
{ 
常见问题解答：uuidv4（），
问题：“项目2”，
回答：“Anim pariatur的陈词滥调reprehenderit，enim eiusmod high life accusamus terry richardson ad squid.3 wolf moon officia aute，非Cupidata滑板多洛早午餐。”
},
{ 
常见问题解答：uuidv4（），
问题：“项目3”，
回答：“Anim pariatur的陈词滥调reprehenderit，enim eiusmod high life accusamus terry richardson ad squid.3 wolf moon officia aute，非Cupidata滑板多洛早午餐。”
},
{ 
常见问题解答：uuidv4（），
问题：“项目4”，
回答：“Anim pariatur的陈词滥调reprehenderit，enim eiusmod high life accusamus terry richardson ad squid.3 wolf moon officia aute，非Cupidata滑板多洛早午餐。”
},
{ 
常见问题解答：uuidv4（），
问题：“项目5”，
回答：“Anim pariatur的陈词滥调reprehenderit，enim eiusmod high life accusamus terry richardson ad squid.3 wolf moon officia aute，非Cupidata滑板多洛早午餐。”
},
{ 
常见问题解答：uuidv4（），
问题：“项目6”，
回答：“Anim pariatur的陈词滥调reprehenderit，enim eiusmod high life accusamus terry richardson ad squid.3 wolf moon officia aute，非Cupidata滑板多洛早午餐。”
}  
];
功能模板（常见问题）{
返回`
${faq.answer}
`
}
document.getElementById（“accordionEx”）.innerHTML=`${qaList.map（qaTemplate.join（“”）}`

您有两个问题

您的aria labelledby都指向同一个id（多个具有headingOne1的对象）使用uuid
heading-$（uuid}
将其更改为动态id
您的uuid生成器正在生成以数字开头的id。这不是有效的html id。我在id前面加了
I-
请参见下面的工作示例


//为div id生成一个随机数
函数uuidv4（）{
返回“xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxx”。替换（/[xy]/g，函数（c）{
var r=Math.random（）*16 | 0，v=c='x'？r:（r&0x3 | 0x8）；
返回v.toString（16）；
});
}
//参展商
常数qaList=[
{ 
常见问题解答：uuidv4（），
问题：“项目1”，
回答：“Anim pariatur的陈词滥调reprehenderit，enim eiusmod high life accusamus terry richardson ad squid.3 wolf moon officia aute，非Cupidata滑板多洛早午餐。”
},
{ 
常见问题解答：uuidv4（），
问题：“项目2”，
回答：“Anim pariatur的陈词滥调reprehenderit，enim eiusmod high life accusamus terry richardson ad squid.3 wolf moon officia aute，非Cupidata滑板多洛早午餐。”
},
{ 
常见问题解答：uuidv4（），
问题：“项目3”，
回答：“Anim pariatur的陈词滥调reprehenderit，enim eiusmod high life accusamus terry richardson ad squid.3 wolf moon officia aute，非Cupidata滑板多洛早午餐。”
},
{ 
常见问题解答：uuidv4（），
问题：“项目4”，
回答：“Anim pariatur的陈词滥调reprehenderit，enim eiusmod high life accusamus terry richardson ad squid.3 wolf moon officia aute，非Cupidata滑板多洛早午餐。”
},
{ 
常见问题解答：uuidv4（），
问题：“项目5”，
回答：“Anim pariatur的陈词滥调reprehenderit，enim eiusmod high life accusamus terry richardson ad squid.3 wolf moon officia aute，非Cupidata滑板多洛早午餐。”
},
{ 
常见问题解答：uuidv4（），
问题：“项目6”，
回答：“Anim pariatur的陈词滥调reprehenderit，enim eiusmod high life accusamus terry richardson ad squid.3 wolf moon officia aute，非Cupidata滑板多洛早午餐。”
}  
];
功能模板（常见问题）{
返回`
${faq.answer}
`
}
document.getElementById（“accordionEx”）.innerHTML=`${qaList.map（qaTemplate.join（“”）}`；

你为什么不直接使用
qaList.map（qaTemplate.join（“”）
？是的。我在那里看到了。你能澄清一下吗？我的意思是你不需要使用模板文本。我已经这样做了，但它不起作用。相同的功能。这些是我知道的，但没有想到的。我感谢你的帮助。