[рони]

voraa,

<style>
.tristate {
    border: 1px solid black;
    background-color: inherit;
    padding: 5px 1em;
    margin: 0.5em 1em;
}

.tristate::before {
    content: attr(name);
    margin-right: 2em;
}

.tristate[value="0"]::after {
    content: "не важно";
}

.tristate[value="1"]::after {
    content: "есть";
}

.tristate[value="2"]::after {
    content: "нет";
}

</style>
<button type="button" class="tristate" value="0" name="COOH"></button><br>
<button type="button" class="tristate" value="0" name="HN3"></button><br>
<button type="button" class="tristate" value="0" name="CH3"></button><br>

<script>
document.querySelectorAll('.tristate')
    .forEach(e => {
        e.addEventListener('click', (ev) => {
            e.value = (+e.value + 1)  % 3;
        })
    })
</script>