[рони]

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>