动态添加的javascript函数不起作用

我正在尝试动态添加html代码和JavaScript函数。html代码基本上是一张有段落的卡片，我正在为该段落实现一个ReadMore按钮。我有多张这样的卡，每张卡都有一个readMore函数。因此，卡1将具有与之关联的readMore0函数，以此类推

现在，当我添加html内容和javascript函数时，只运行与第一张卡对应的函数，而与其他卡对应的函数会给出一个错误提示 rooms.html:1未捕获引用错误：未定义readMore3 在htmlanchorement.onclick（rooms.html:1）

这方面的代码是：-

function display_card() {
var url = "URL";
var script = document.createElement('script');
script.type = 'text/javascript';
var body = document.getElementsByTagName('body')[0];

fetch(url, {
    method: 'get',
})
    .then( (response) => {
        return response.json()
    })
    .then((id_json) => {
        // Work with JSON data here
        console.log(id_json);
        var scripts = "";
        var count = 0;
      for (i in id_json) {
                
                var room_url = "URL" + id_json[i]._id;
                // console.log(i);
                fetch(room_url, {
                    method: 'get',
                })
                .then((resp) => {
                    return resp.json();
                })
                .then((room_data) => {
                    // Work with JSON data here
                        console.log(count);
                         scripts += `
                         function readMore${count}() {
                            console.log(readMore${count});
                            var dots = document.getElementById("dots${count}");
                            var moreText = document.getElementById("more${count}");
                            var btnText = document.getElementById("readbtn${count}");
                
                            if (dots.style.display === "none") {
                                dots.style.display = "inline";
                                btnText.innerHTML = "Read more"; 
                                moreText.style.display = "none";
                            } else {
                                dots.style.display = "none";
                                btnText.innerHTML = "Read less"; 
                                moreText.style.display = "inline";
                            }
                        };
                         `
                         checkout_html += `
                         <div class="blog-slider mt-5 " data-aos='fade-up'>
                         <div class="blog-slider__wrp swiper-wrapper">
                             <div class="blog-slider__item swiper-slide">
                                 <div class="blog-slider__content">
                                     <div class="blog-slider__text" data-aos="zoom-in"> 
                                         ${room_data.description.slice(0,100)}
                                         <span id="dots${count}">...</span> <span id="more${count}">    
                                         ${room_data.description.slice(100)}
                                         <br> </span> 
                                         <a onclick="readMore${count}($(this))" id="readbtn${count}">Read more</a>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                         `
                         if (checkout_html == "undefined") {
                            checkout_html = "";
                        } 
                        count ++ ;
                    
                })
                .catch((err) => {
                    console.log(err);
                    // Do something for an error here
                })
                .finally(function () {
                    script.text = scripts;
                    body.appendChild(script);
                    document.getElementById('cards').innerHTML = checkout_html;
                })
            
        } //end of for loop
    })
    .catch((err) => {
        console.log(err);
    })
  }

功能显示卡（）{
var url=“url”；
var script=document.createElement（'script'）；
script.type='text/javascript'；
var body=document.getElementsByTagName（'body'）[0]；
获取（url{
方法：“get”，
})
。然后（（响应）=>{
返回response.json（）
})
。然后（（id_json）=>{
//在这里使用JSON数据
log（id_json）；
var脚本=”；
var计数=0；
for（id_json中的i）{
var room_url=“url”+id\u json[i]。\u id；
//控制台日志（i）；
获取（房间地址）{
方法：“get”，
})
。然后（（resp）=>{
返回resp.json（）；
})
.然后（（房间数据）=>{
//在这里使用JSON数据
控制台日志（计数）；
脚本+=`
函数readMore${count}（）{
log（readMore${count}）；
var dots=document.getElementById（“dots${count}”）；
var moreText=document.getElementById（“more${count}”）；
var btnText=document.getElementById（“readbtn${count}”）；
如果（dots.style.display==“无”）{
dots.style.display=“inline”；
btnText.innerHTML=“阅读更多”；
moreText.style.display=“无”；
}否则{
dots.style.display=“无”；
btnText.innerHTML=“少读”；
moreText.style.display=“inline”；
}
};
`
签出html+=`
${room_data.description.slice（0100）}
...     
${room_data.description.slice（100）}


这是一个通用的例子，演示了他在评论中提到的@trincot模式

与在每个动态子级上绑定事件侦听器不同，您只在所有动态子级的公共父级上绑定一个侦听器，该父级在绑定时需要位于页面中，并将保存所有项

当前或未来子级上的任何单击事件都将冒泡到该父级，使用
事件
参数，您将能够确定单击是否位于正确类型的元素/子级上，如果是，则执行业务逻辑


//我们只在所有未来子项的父项上绑定一次：
//如您所见，父级最初为空
document.getElementById（'items'）.addEventListener（'click'，函数（事件）{
如果（event.target.nodeName==='按钮'）{
const container=event.target.closest（'.flexer'）；
if（集装箱）{
警报（`您单击了id${container.dataset.id}和userId${container.dataset.userId}！`的项）；
}
}
});
函数fetchItems（）{
取（'https://jsonplaceholder.typicode.com/todos')
.then（response=>response.json（））
。然后（json=>{
forEach（item=>{
const pre=document.createElement（'pre'）；
pre.innerText=JSON.stringify（item，null，2）；
const button=document.createElement（'button'）；
button.innerText='单击我'；
const container=document.createElement（'div'）；
container.dataset.userId=item.userId；
container.dataset.id=item.id；
container.classList.add（'flexer'）；
容器。子容器（pre）；
container.appendChild（按钮）；
document.getElementById（'items'）.appendChild（容器）；
})
})
}
函数刷新项（）{
document.getElementById（'items'）。innerHTML=''；
设置超时（（）=>{
fetchItems（）；
}, 1000)
}
refreshItems（）//项目的初始加载…
.flexer{
显示器：flex；
边框：1px实心#F5；
边缘底部：.5rem；
对齐项目：柔性端；
填充：.5rem；
证明内容：之间的空间；
}
.浮动按钮{
位置：固定；
左：1rem；
底部：1rem；
}
刷新项目
将源代码附加到整个元素code@datdinhquoc我尝试将其附加到head，但仍然出现了相同的错误。这是一种反模式，为HTML元素提供一个带有增量后缀的
id
属性，然后肯定只为该元素加载一个新脚本，这与所有其他脚本的作用基本相同应该只需要一个脚本，没有
id
attributes，一个通用的事件处理程序（万能的），它会检查事件来自哪个元素，并为它应用“更多”逻辑。@trincot我明白你的意思，你能举个例子说明一个脚本应用于不同的元素吗