Javascript 烧瓶按键

我正在为我的应用程序使用flask，当用户按下其中一个选定按钮时，我希望显示一个div。虽然这适用于每个按钮，但“喜欢功能”仅适用于第一个按钮中的div。当用户按压心脏时，我会将一个未填充的心脏favicon替换为一个填充的心脏favicon。然而，这只适用于第一个div，而不适用于其他div，我似乎不知道为什么

类似功能（状态）{
console.log（“此处”）；
如果（状态=='True'）{
控制台日志（状态）；
document.getElementById（'nofill'）.style.display=“无”；
document.getElementById（'fill'）.style.display=“内联块”；
}否则，如果（状态=='False'）{
控制台日志（状态）；
document.getElementById（'fill'）.style.display=“无”；
document.getElementById（'nofill'）.style.display=“内联块”；
}
}
功能显示信息（标签、按钮标识）{
log（“转到actions.js文件”）；
控制台日志（按钮id）；
var selected_tag_div=document.getElementById（标记）；
var button=document.getElementById（按钮id）；
如果（选定的标签样式显示==“无”）{
所选的\u tag\u div.style.display=“block”；
所选的_tag_div.style.textAlign=“left”；
//所选的_tag_div.style.backgroundColor=“#5BC0DE”；
button.style.opacity=.7；
所选的\u标签\u div.style.height=“100px”；
}否则{
所选的\u tag\u div.style.display=“无”；
button.style.backgroundColor=“#5BC0DE”；
button.style.opacity=1；
}
}

{%if输出%}
要使用的顶部
{%for output%}{%set button_id=tag[1:][+“-btn”%}
{{tag}}
{%endfor%}
{%endif%}

必须是唯一的，因此在

DOM

中不能有具有相同id的元素

<span style="float: right;" onclick="like('True')"><i id='nofill' class="far fa-heart" style="color: #000000; font-size:1.5em; display: inline-block"></i></span>
<span style="float: right;" onclick="like('False')"><i id='fill' class="fas fa-heart" style="color: #FF0000; font-size:1.5em;"></i></span>

另外，看看如何使用关键字，并了解更多有关

<span style="float: right;" onclick="like('True')"><i class='nofill' class="far fa-heart" style="color: #000000; font-size:1.5em; display: inline-block"></i></span>
<span style="float: right;" onclick="like('False')"><i class='fill' class="fas fa-heart" style="color: #FF0000; font-size:1.5em;"></i></span>