JSFiddle - React, Tailwind, and code Playground

HTML

<form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validateForm(this);" >
<div id="detailsBlock">

<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" class="gridTxt" readonly="readonly" />
    <span href="#" class="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"  />
            </td>
        </tr> 
        </table>
        </td>
</tr>

<tr>
<td>Answer</td>
<td>
<table>
<tr>
<td>
<input class="answerBtns" name="answerAName"     id="answerA"         type="button"      value="A"         onclick="btnclick(this);"/>
<input class="answerBtns" name="answerBName"    id="answerB"         type="button"   value="B"         onclick="btnclick(this);"/>
<input class="answerBtns" name="answerCName"     id="answerC"         type="button"      value="C"         onclick="btnclick(this);"/>
<input class="answerBtns" name="answerDName"     id="answerD"         type="button"      value="D"         onclick="btnclick(this);"/>
<input class="answerBtns" name="answerEName"     id="answerE"         type="button"   value="E"         onclick="btnclick(this);"/>
<input class="answerBtns" name="answerFName"     id="answerF"         type="button"      value="F"         onclick="btnclick(this);"/>
<input class="answerBtns" name="answerGName"    id="answerG"         type="button"   value="G"        ...

CSS

td { 
    vertical-align: top;
     }
.qid { 
    width: 40px; 
    font-size:14px;
    font-weight:bold;
    text-align:center;
    }

.option{
    width: 200px;
    text-align:center;
}

.answer { 
    width: 275px;
    text-align:center;
     }

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

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

#detailsBlock{    
    text-align:center;
}
    
              
.na{
    display:none;
    float:left;    
}


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

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

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

.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:14px;
   ...

JavaScript

$(document).ready(function()

{
    initClick = 0;

    $('#enter').submit(function(jqEvt) {

        if (!validateForm(this)) jqEvt.originalEvent.returnValue = false;
    });


    $('.showGrid').live('click', function(jqEvt) {

        $(".gridBtns").removeClass("gridBtnsOn");

        var value = $(this).siblings('input[name=gridValues]').val();

        $("#btn" + value).addClass("gridBtnsOn");

        $('#optionTypeTbl').fadeToggle('slow');
        $(this).parent().append($('#optionTypeTbl'));
        $('#optionTypeTbl').css({

            left: $(this).position().left,
            top: $(this).position().top + 20

        });

        jqEvt.stopPropagation();

    });



    $(document).click(function(jqEvt) {

        $('#optionTypeTbl').fadeOut('slow');
        // fadeOut already hides it for you.
    });

    $('#optionTypeTbl input').click(function() {

        $(".gridBtns").removeClass("gridBtnsOn");
        $(this).addClass("gridBtnsOn");

        console.log($(this).closest('td'));

        $(this).closest('#optionTypeTbl').siblings('input[name=gridValues]').val($(this).val());
        $('#optionTypeTbl').hide();
    });



    $('.gridBtns').live('click', function(jqEvt)

    {

        var clickedNumber = this.value;

        $('.answerBtns').each(function(index) {
            if (!isNaN(clickedNumber) && index < clickedNumber) {
                $(this).show();
                $('#na').hide();
                $('#allBtns').show();
                $('#allRemoveBtns').show();

            } else {

                $(this).hide();
                $(this).removeClass('answerBtnsOn');
                $(this).addClass('answerBtnsOff');

            }

        });

        getButtons();

    });

});

var currenttotal;

function getButtons()

{

    var i;

    if (initClick == 0) {
        for (i = 65; i <= 90; i++) { // iterate over character codes for A to Z
            $("#answer" +...