JSFiddle - React, Tailwind, and code Playground

HTML

<br />
1 = <button class="A"></button> - <button class="B"></button>
<br />
<br />
2 = <button class="A"></button> - <button class="B"></button>

CSS

.A, .B {
    height: 40px;
    width: 40px;
    padding: 0;
    margin-top: -10px;
}

JavaScript

$('.A').click(function (evt) {
    var t = $(this)[0].innerHTML;
    if (t == '') $(this).text('A');
    else if (t == 'A') $(this).text('a');
    else if (t == 'a') $(this).text('');
    evt.preventDefault();
});
$('.B').click(function (evt) {
    var t = $(this)[0].innerHTML;
    if (t == '') $(this).text('B');
    else if (t == 'B') $(this).text('b');
    else if (t == 'b') $(this).text('');
    evt.preventDefault();
});