如何访问由forEach在Javascript中创建的元素？

我使用的是星球大战API swapi.co，我试图在下面的代码中访问电影的id，并检查值是否为3或更多，如果是，我想向显示图标的元素添加一个类

我似乎无法获取ElementById（“films”），可能是因为该id已在forEach中以单引号写入

let div = '<div id="inner-container">';
    data.forEach( function(item) {
        div += 
        '<ul class="item-container">'
        + '<li class="item">' + '<span>' + 'Starship Name: ' + '</span>' + '<br>' + item.name + '</li>' +
        '<li class="item">' + '<span>' + 'Starship Model: ' + '</span>' + '<br>' + item.model + '</li>' +
        '<li id="films" class="item">' + '<span>' + 'Number of Films: ' + '</span>' + item.films.length + '</li>' +
        '</ul>';

    });
    div += '</div>';
    document.getElementById("main-container").innerHTML = div;
});

let div=''；
data.forEach（功能（项）{
div+=
“
”
+“
”+“+”+”星际飞船名称：“+”+”
“+item.Name+”
”+
“
”+“+”+”星际飞船模型：“+”+”
“+item.Model+”
”+
“
”++'+'+'电影数量：“++'+'+item.films.length+”
”+
“
”；
});
div+=''；
document.getElementById（“主容器”）.innerHTML=div；
});

函数列表项（数据）{
设div=''；
data.forEach（函数（项、索引）{
div+=
“
”
+“
”+“+”+”星际飞船名称：“+”+”
“+item.Name+”
”+
“
”+“+”+”星际飞船模型：“+”+”
“+item.Model+”
”+
“
“++'+'+'电影数量：“++'+'+item.films.length+”
'+
“
”；
});
div+=''；
document.getElementById（“主容器”）.innerHTML=div；
};
列表项([{
名称：'Hello 0'，型号：'model 0'，电影：[1,2,3]
},{
名称：'Hello 1'，型号：'model 1'，电影：[1,2,3]
}]);
console.log（document.getElementById（'films-0'）；
console.log（document.getElementById（'films-1'）
如果要呈现htmlString，请不要在字符串文本中包含变量：

"<div class='crappy way'>"+ variable +"</div>"


星球大战
id在HTML页面中必须是唯一的。。。显然，您将有多个
id=“films”
使您的HTML无效。。。也就是说，您仍然可以获得第一个您可以使用
forEach
提供的索引更新id的id。如果您需要保留
影片
，请将其设置为
名称
或
类
，并将索引设置为
数据id
@JaromandaX谢谢您提醒我！感谢大家的帮助，这里是一个链接到完成的页面-这是一个新工作角色的技术测试。
`<div class='better way'>${variable}</div>`