JSFiddle - React, Tailwind, and code Playground

HTML

<table id="optionAndAnswer">
<tr>
      <th colspan="2">
        Option and Answer
    </th>
</tr>
<tr>
<td>Option Type:</td>
<td>
<div class="box">
    <input type="text" name="gridValues" id="gridTxt" readonly="readonly" />
    <span href="#" id="showGrid">[Open Grid]</span>
</div>
<table id="optionTypeTbl">
<tr>
<td>
            <input class="gridBtns" name="btn1Name"  id="btn1"     type="button"  value="1"  />
            <input class="gridBtns" name="btn2Name"  id="btn2"     type="button"  value="2"  />
            <input class="gridBtns" name="btn3Name"  id="btn3"     type="button"  value="3"  />
            <input class="gridBtns" name="btn4Name"  id="btn4"     type="button"  value="4"  />
            <input class="gridBtns" name="btn5Name"  id="btn5"     type="button"  value="5"  />
            <input class="gridBtns" name="btn6Name"  id="btn6"     type="button"  value="6"  />
            <input class="gridBtns" name="btn7Name"  id="btn7"     type="button"  value="7"  />
            </td>
        <tr>
        <td>
            <input class="gridBtns" name="btn8Name"   id="btn8"     type="button"  value="8"  />
            <input class="gridBtns" name="btn9Name"   id="btn9"     type="button"  value="9"  />
            <input class="gridBtns" name="btn10Name"  id="btn10"     type="button"  value="10"  />
            <input class="gridBtns" name="btn11Name"  id="btn11"     type="button"  value="11"  />
            <input class="gridBtns" name="btn12Name"  id="btn12"     type="button"  value="12"  />
            <input class="gridBtns" name="btn13Name"  id="btn13"     type="button"  value="13"  />
            <input class="gridBtns" name="btn14Name"  id="btn14"     type="button"  value="14"  />
        </td>
            </tr>
        <tr>
        <td>
            <input class="gridBtns" name="btn15Name"  id="btn15"     type="button"  value="15"  />
            <input class="gridBtns" name="btn16Name"  id="btn16"     type="button"  value="16"  />
           ...

CSS

#optionAndAnswer{
    display:inline-block;
    vertical-align:top;
}

#optionAndAnswer th{
    border-collapse:collapse;
    border:1px solid black;    
}

#optionAndAnswer td{
    border-collapse:collapse;
    border:1px solid black;    
}
.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;
}

#showGrid{
    color:blue;
    font-style:underline;    
    cursor:pointer;
}

#optionTypeTbl{
    display:none;    
    background-color:white;
    position:absolute;  
}

#gridTxt{
    width:120px;
    background-color: #F2F2F2;
    border-color: #ddd;
    float:left;
}

#optionAndAnswer td table td {
    border: 0px;   
}

JavaScript

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

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

            $('#optionTypeTbl  input').click(function(){
                  $(".gridBtns").removeClass("gridBtnsOn");
                    $(this).addClass("gridBtnsOn");
                $('.box INPUT').val($(this).val())
                $('#optionTypeTbl').hide();
            });
        });
        
        
$(".gridBtns").click(function() {
   // what you need from your "buttonclick(button)" function should go here
   // except instead of the "button" parameter you can just use "this",
   // e.g., this.value

   var clickedNumber = this.value;

   $('.answerBtns').each(function (index) {
      if (index < clickedNumber)
         $(this).show();
      else
         $(this).hide();
   });

});

});


function getButtons() {
    for(var i = 65; i <= 90; i++) { // iterate over character codes for A to Z
        var letter = $('#numberAnswerTxt').val();
        letter = 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...