JSFiddle - React, Tailwind, and code Playground

HTML

<table id="optionAndAnswer">
<tr>
<td>Option Type:</td>
<td>
<div class="box">
    <input type="text" name="gridValues" readonly="readonly" />
    <a href="#" id="showGrid">[Open grid]</a>
</div>
<table id="optionTypeTbl">
<tr>
<td>
            <input class="gridBtns" name="btn1Name"  id="btn1"     type="button"  value="1"  onclick="javascript:buttonclick(this);"/>
            <input class="gridBtns" name="btn2Name"  id="btn2"     type="button"  value="2"  onclick="javascript:buttonclick(this);"/>
            <input class="gridBtns" name="btn3Name"  id="btn3"     type="button"  value="3"  onclick="javascript:buttonclick(this);"/>
            <input class="gridBtns" name="btn4Name"  id="btn4"     type="button"  value="4"  onclick="javascript:buttonclick(this);"/>
            <input class="gridBtns" name="btn5Name"  id="btn5"     type="button"  value="5"  onclick="javascript:buttonclick(this);"/>
            <input class="gridBtns" name="btn6Name"  id="btn6"     type="button"  value="6"  onclick="javascript:buttonclick(this);"/>
            <input class="gridBtns" name="btn7Name"  id="btn7"     type="button"  value="7"  onclick="javascript:buttonclick(this);"/>
            </td>
        <tr>
        <td>
            <input class="gridBtns" name="btn8Name"   id="btn8"     type="button"  value="8"  onclick="javascript:buttonclick(this);"/>
            <input class="gridBtns" name="btn9Name"   id="btn9"     type="button"  value="9"  onclick="javascript:buttonclick(this);"/>
            <input class="gridBtns" name="btn10Name"  id="btn10"     type="button"  value="10"  onclick="javascript:buttonclick(this);"/>
            <input class="gridBtns" name="btn11Name"  id="btn11"     type="button"  value="11"  onclick="javascript:buttonclick(this);"/>
            <input class="gridBtns" name="btn12Name"  id="btn12"     type="button"  value="12"  onclick="javascript:buttonclick(this);"/>
            <input class="gridBtns" name="btn13Name"  id="btn13"     type="button" ...

CSS

.answerBtns{
    background-color: #ffffff;
    border: #666666 1px solid;
    color: black;
    font-weight:bold;
    display:none;
    }
    
.answerBtnsOff{
    background-color: #ffffff;
    border: #666666 1px solid;
    color: black;
    font-weight:bold;
 
}
 
.answerBtnsOn{
    background-color: green;
    border: #666666 1px solid;
    color: #ffffff;
    font-weight:bold;
}

.gridBtns{
    background-color: #ffffff;
    border: #666666 1px solid;
    color: black;
    font-weight:bold;
    }
    
.gridBtnsOff{
    background-color: #ffffff;
    border: #666666 1px solid;
    color: black;
    font-weight:bold;
 
}
 
.gridBtnsOn{
    background-color: green;
    border: #666666 1px solid;
    color: #ffffff;
    font-weight:bold;
}

JavaScript

$(function() {
            $('#showGrid').click(function(e) {
                if ($('#optionTypeTbl').css("display") == "table") {
                    $('#optionTypeTbl').hide();
                }
                else {
                    $('#optionTypeTbl').css("display", "table");
                }
                e.stopPropagation();
            });

            $("body").click(function() {
                $('#optionTypeTbl').hide();   
            });

            $('#optionTypeTbl  input').click(function(){
                  $(".gridBtns").removeClass("gridBtnsOn");
                    $(this).addClass("gridBtnsOn");
                $('.box INPUT').val($(this).val())
                $('#optionTypeTbl').hide();
            });
        });

function getButtons() {
    for(var i = 65; i <= 90; i++) { // iterate over character codes for A to Z
        var letter = String.fromCharCode(i);
        document.getElementById("answer" + letter).className = "answerBtnsOff";
    }
    document.getElementById("answerTrue").className = "answerBtnsOff";
    document.getElementById("answerFalse").className = "answerBtnsOff";
    document.getElementById("answerYes").className = "answerBtnsOff";
    document.getElementById("answerNo").className = "answerBtnsOff";

    currenttotal = 0;
    // code above makes sure all buttons start off with class answerBtnsOff, (so all button are white).
}

function btnclick(btn) {
    if (document.getElementById("numberAnswerTxt").value == "") {
        alert('You must first enter in the number of answers you require in the textbox above');
        return false;
        
        //if text box empty then send alert
        
    }
    if (btn.className == "answerBtnsOn") {
        console.log(2);
        btn.className = "answerBtnsOff";
        currenttotal--;
        return false;
        
        //if a button is already selected (in other words "answerBtnsOn), then turn it off if clicked on
        
    }
    console.log(currenttotal);
   ...