Огромное спасибо за советы!!!
Попробовал оба варианта, и хотел бы выложить на обсуждение модифицированный вариант с кнопками, покритикуйте, пожалуйста, если там что-то совсем не красиво получается.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
.css_l { border-radius: 10px; border: 2px solid black; color: black; padding: 5px 5px; text-align: center; vertical-align: center; font-size: 16px; margin: 1px 1px; cursor: pointer; }
</style>
</head>
<body>
<div id="main"></div>
<script>
var Radicals = ["=C=O", "-HC=O", "-O-C(=O", "-C(=O", "-CH3", "-CH2-CH2-", "-CH=CH-", "-C#C-", "-CH2-CH3", "-NH2", "-NO2", "-NO", "-C#N", "#PO4", "=PO4", "C3", "c3", "C4", "c4", "C5", "c5", "C6", "c6", "C7", "c7", "C8", "c8", "C9", "c9", "C10", "c10", "C6-C4", "c6-c4", "C6-C3", "c6-c3", "C6-C4-C4", "c6-c4-c4", "-CH(OH)-", "-[CH(OH)]2-", "-[CH(OH)]3-", "-[CH(OH)]4-", "-[CH(OH)]5-"];
var RadicalsStatus = [];
var StatusName = [ " ", " ✅", " ⛔" ];
function Ini()
{ let html="";
for(let i=0; i<Radicals.length; i++)
{ RadicalsStatus[i]=0;
html+="<button class='css_l' id='ch" + i + "' onclick='ts(" + i + ")'>" + Radicals[i] + StatusName[0] + "</button>";
}
document.getElementById("main").innerHTML=html;
}
Ini();
function ts(i)
{ if((++RadicalsStatus[i])==3) RadicalsStatus[i]=0;
document.getElementById("ch" + i).innerHTML=Radicals[i] + StatusName[RadicalsStatus[i]];
}
</script>
</body>
</html>
Спасибо!
С наступающим Вас Новым Годом!!!