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="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"  />
            <input class="gridBtns" name="btn8Name"   id="btn8"     type="button"  value="8"  />
            </td>
        <tr>
        <td>
            <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"  />
            <input class="gridBtns" name="btn17Name"  id="btn17"     type="button"  value="17"  />
            <input class="gridBtns" name="btn18Name"  id="btn18"     type="button"  value="18"  />
        ...

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;
}

#addQuestionBtn{
    font-weight:bold;
    font-size:14px;
    height:30px;
    width:150px;    
}

#questionTextArea{
    resize:none;    
}

#showGrid{
    color:blue;
    text-decoration:underline;    
    cursor:pointer;
}

#optionTypeTbl{
    display:none;    
    background-color:white;
    position:absolute;  
    border:1px solid black;
}

#gridTxt{
    width:120px;
    background-color: #F2F2F2;
    border-color: #ddd;
    float:left;
    font-size:18px;
    font-weight:bold;
}

JavaScript

$(document).ready(function ()

{

    $('#numberAnswerTxt').bind('keyup', function () {
        var gridTxt = parseInt($('#gridTxt').val().replace(/[^0-9\.]+/g, ''));
        if (gridTxt > 0) {
            this.value = parseInt(this.value.replace(/[^0-9\.]+/g, ''));
            if (this.value > gridTxt) {
                this.value = gridTxt;
            }
        } else {
            this.value = '';
        }
    });
    
$(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()

    {

    var clickedNumber = this.value;
    $('.answerBtns').each(function(index) {
    if (!isNaN(clickedNumber) && index < clickedNumber) {
    $(this).show();
    $('#numberAnswerTxt').show();
    $('#na').hide();
    
    } else {

    $(this).hide();

    }
    
    });

    if (clickedNumber === 'True or False') {

    $('#answerTrue').show();
    $('#answerFalse').show();
    $('#na').show();
    $('#numberAnswerTxt').val(1).hide();    

    } else

    if (clickedNumber === 'Yes or No') {

    $('#answerYes').show();
    $('#answerNo').show();
    $('#na').show();
    $('#numberAnswerTxt').val(1).hide();

    }

    getButtons();

    });
    
    });

    var currenttotal;

    function getButtons()

    {

    var i;

    for(i = 65; i <= 90; i++) { // iterate over character codes for A to Z

    $("#answer" +...