JSFiddle - React, Tailwind, and code Playground

HTML

<form id="QandA" action="QandATable3.php" method="post">

<div id="detailsBlock">

<table id="optionAndAnswer" class="optionAndAnswer">
<tr>
<td>
<table id="answerSection">
    <tr>
<td>
<input class="answerBtns answers answerBtnsOff" name="answerAName"  id="answerA"     type="button"      value="A"     onclick="btnclick(this);"/>
<input class="answerBtns answers answerBtnsOff" name="answerBName" id="answerB"     type="button"   value="B"     onclick="btnclick(this);"/>
<input class="answerBtns answers answerBtnsOff" name="answerCName"  id="answerC"     type="button"      value="C"     onclick="btnclick(this);"/>
<input class="answerBtns answers answerBtnsOff" name="answerDName" id="answerD"     type="button"   value="D"     onclick="btnclick(this);"/>
<input class="answerBtns answers answerBtnsOff" name="answerEName"  id="answerE"     type="button"      value="E"     onclick="btnclick(this);"/>
<input class="answerBtns answers answerBtnsOff" name="answerFName" id="answerF"     type="button"   value="F"     onclick="btnclick(this);"/>
<input class="answerBtns answers answerBtnsOff" name="answerGName"  id="answerG"     type="button"      value="G"     onclick="btnclick(this);"/>
<input class="answerBtns answers answerBtnsOff" name="answerHName" id="answerH"     type="button"   value="H"     onclick="btnclick(this);"/>
<input class="answerBtns answers answerBtnsOff" name="answerTrueName"  id="answerTrue"     type="button"      value="True"     onclick="btnclick(this);"/>
<input class="answerBtns answers answerBtnsOff" name="answerFalseName" id="answerFalse"     type="button"   value="False"     onclick="btnclick(this);"/>
         <input class="answerBtns answers answerBtnsOff" name="answerTrueName"  id="answerYes"     type="button"      value="Yes"     onclick="btnclick(this);"/>
<input class="answerBtns answers answerBtnsOff" name="answerFalseName" id="answerNo"     type="button"   value="No"     onclick="btnclick(this);"/>
        </td>
       ...

CSS

/*css for QandATable.php*/
body{
    font-size:85%;    
}            
            
#qandatbl{
    border:1px black solid;
    border-collapse:collapse;
}

#qandatbl td { 
    vertical-align: middle;
}
     
#qandatbl th{
    border:1px black solid;
    border-collapse:collapse;
    text-align:center;
}

.extratd{
    border:1px black solid;
    border-collapse:collapse;
}



.optandans{
    border:1px black solid;
    border-collapse:collapse;
}

 
.answer { 
    padding-top:5%;
    padding-bottom:5%;
     }
     

#optionAndAnswer{
    display:inline-block;
    vertical-align:top;
    min-width:28%;
    max-width:28%;
}

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

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

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


#answerSection{
    width:100%;
    text-align:center;    
}

#detailsBlock{    
    text-align:center;
}
    

.answerBtns{
    background-color: #ffffff;
    border: #666666 1px solid;
    color: black;
    font-weight:bold;
    cursor:pointer;
    font-size:85%;    
    }
    
.answerBtnsOff{
    background-color: #ffffff;
    border: #666666 1px solid;
    color: black;
    font-weight:bold;
    cursor:pointer;
    font-size:85%;    
}
 
.answerBtnsOn{
    background-color: green;
    border: #666666 1px solid;
    color: #ffffff;
    font-weight:bold;
    cursor:pointer;
    font-size:85%;    
}

.answerBtnsRow{
    background-color: #ffffff;
    border: #666666 1px solid;
    color: black;
    font-weight:bold;
    display:none;
    cursor:pointer;
    font-size:85%;    
    }
    
.answerBtnsOffRow{
    background-color: #ffffff;
    border: #666666 1px solid;
    color: black;
    font-weight:bold;
    cursor:pointer;
    font-size:85%;    
}
 
.answerBtnsOnRow{
    background-color: green;
    border: #666666 1px solid;
    color: #ffffff;
    font-weight:bold;
    cursor:pointer;
    font-size:85%;   ...

JavaScript

function btnclick(btn, iQuestionIndex)
{
    var context = $(btn).parents('#optionAndAnswer');
    if (context.length == 0) {
        context = $(btn).parents('tr');
    }
    var $btn = $(btn);
    var value = btn.value;
    var id = $btn.attr('id');
    
    var $otherYNBtn = value === "Yes" ? $(context.find("input[value='No']")) : $(context.find("input[value='Yes']"));
    var $otherTFBtn = value === "True" ? $(context.find("input[value='False']")) : $(context.find("input[value='True']"));
    

    if ($(context.find("input[value='Yes']")).hasClass('answerBtnsOn')) {
        $otherYNBtn.removeClass('answerBtnsOn').addClass('answerBtnsOff');
    }

    else if ($(context.find("input[value='No']")).hasClass('answerBtnsOn')) {
        $otherYNBtn.removeClass('answerBtnsOn').addClass('answerBtnsOff');
    }
    
    if ($(context.find("input[value='True']")).hasClass('answerBtnsOn')) {
        $otherTFBtn.removeClass('answerBtnsOn').addClass('answerBtnsOff');
    }

    else if ($(context.find("input[value='False']")).hasClass('answerBtnsOn')) {
        $otherTFBtn.removeClass('answerBtnsOn').addClass('answerBtnsOff');
    }
    
    var _sCurrQ_Class = 'q_' + iQuestionIndex;
    var _oCurrAnswerContainer = jQuery('#answer_selections .' + _sCurrQ_Class);
    if (!_oCurrAnswerContainer.length) {
        _oCurrAnswerContainer = jQuery(document.createElement('div')).addClass(_sCurrQ_Class);
        jQuery('#answer_selections').append(_oCurrAnswerContainer);
    }
    else
        _oCurrAnswerContainer.html('');
    
    if ($(btn).hasClass('answerBtnsOff')) {
        //Creating a div for each question with answer inside.
 
        
        var n = $("input[name='" + id + "value']").length;
        var hid = "hidden" + id + n + "value";    
        $(btn).attr("data-hid", hid);

        // append those values to the form
        var input = '<input type="text" id="' + hid + '" value="' + value + '" name="' + id + 'value" />';
       ...