Was-Ja,
<style>
.css_l {
border-radius: 10px;
border: 2px solid black;
color: black;
padding: 3px 5px;
text-align: center;
vertical-align: center;
font-size: 16px;
margin: 1px 1px;
cursor: pointer;
}
.css_l:focus {
outline: none;
}
.css_l::before {
content: attr(name);
margin-right: .2em;
}
.css_l[value='0']::after {
content: '\2004\2004\2004\2004';
}
.css_l[value='1']::after {
content: ' ✅';
}
.css_l[value='2']::after {
content: ' ⛔';
}
</style>
<div id="main"></div>
<script>
const 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-"];
const button = document.createElement("BUTTON");
button.className = "css_l";
button.value = "0";
const click = function() {
this.value = (+this.value + 1) % 3;
}
Radicals.forEach(title => {
let clone = button.cloneNode();
clone.setAttribute("name", title);
clone.addEventListener("click", click);
main.append(clone)
})
</script>
