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 class="option">
<td>Option Type:</td>
<td>
<div class="box">
    <input type="text" name="gridValues" class="gridTxt maxRow" readonly="readonly" />
    <span href="#" class="showGrid">[Open Grid]</span>
</div>
<table class="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"  />
            </td>
            </tr>
        <tr>
        <td>
        <input class="gridBtns" name="btnTrueorFalseName"  id="btnTrueorFalse"     type="button"  value="True or False"  />
        </td>
        </tr> 
        </table>
        </td>
</tr>
<tr>
<td>Number of Answers:</td>
<td>
<span class="na">Only 1 Answer</span>
<input type="text" id="left" name="numberAnswer" class="numberAnswerTxt" onkeyup="numberKeyUp(this)" onkeypress="return isNumberKey(event)" onChange="getButtons()" >
</td>
</tr>
</table>
    <table id="questionBtn" align="center">
<tr>
<th>
<input id="addQuestionBtn" name="addQuestion" type="button" value="Add Question" onClick="insertQuestion(this.form)" />
</th>
</tr>
</table>

</div>
<hr/>

<table id="qandatbl" border="1">
<tr>
    <th class="option">Option Type</th>
    <th class="noofanswers">Number of Answers</th>
</tr>
</table>
</form>

CSS

/*css for QandATable.php*/
            
td { 
    vertical-align: top;
     }
.noofanswers{
    width: 150px;
    text-align:center;
}
.option{
    width: 200px;
    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;
}
    
.numberAnswerTxt{
    width:40px;
    font-size:14px;
    font-weight:bold;
}

#center{
    float:center;
}

#left{
    float:left;
}
              
.na{
    display:none;
    float:left;    
}

.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;
    font-weight:bold;
}    

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

JavaScript

$(document).ready(function()

{

    initClick = 0;


    $(document).on('click', '.showGrid', function(e) {

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

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

        $("#btn" + value.replace(/\s/g, '')).addClass("gridBtnsOn");

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

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

        });

        e.stopPropagation();

    });



    $(document).click(function() {

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

    $('.optionTypeTbl input').on('click', function() {

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

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

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



    $('.gridBtns').on('click', function()

    {

        var clickedNumber = this.value;

        $(this).closest('.option').siblings('.answer').find('.answers').each(function(index) {
            if (!isNaN(clickedNumber) && index < clickedNumber) {
                $(this).show();
                $('.numberAnswerTxt').show();
                $('.na').hide();

            } else {

                $(this).hide();

            }

        });

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

            $(this).closest('.option').siblings('.answer').find('input[name=answerTrueName]').show();
            $(this).closest('.option').siblings('.answer').find('input[name=answerFalseName]').show();
            $('.na').show();
            $('.numberAnswerTxt').val(1).hide();
        }

        getButtons();

    });

});;

function...