JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" name="t1" id="t1" onclick="change(this)" value="t1">
<input type="button" name="t2" id="t2" onclick="change(this)" value="t2"><br>
<input type="button" name="t3" id="t3" onclick="change_(this)" value="t3">
<input type="button" name="t4" id="t4" onclick="change_(this)" value="t4">

CSS

#t1 {
    color:red;
}
#t2 {
    color:blue;
}
#_t1, #t3 {
    color:green;
}
#_t2, #t4 {
    color:black;
}
#a3 {
    color:yellow;
}
#a4 {
    color:white;
}

JavaScript

function change(obj) {
    var id = (obj.id || obj.getAttribute('id'));
    if (!id.match(/_/)) {
        obj.id = '_' + id;
        obj.setAttribute('id', '_' + id);
    }
    else {
        obj.id = id.replace(/_/, '');
        obj.setAttribute('id', id.replace(/_/, ''));
    }
}

function change_(obj) {
    var id = (obj.id || obj.getAttribute('id'));
    if (id == 't3') {
        obj.id = 'a3';
        obj.setAttribute('id', 'a3');
    }
    if (id == 't4') {
        obj.id = 'a4';
        obj.setAttribute('id', 'a4');
    }
    if (id == 'a3') {
        obj.id = 't3';
        obj.setAttribute('id', 't3');
    }
    if (id == 'a4') {
        obj.id = 't4';
        obj.setAttribute('id', 't4');
    }
}