JSFiddle - React, Tailwind, and code Playground

HTML

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

<div id="detailsBlock">
<table id="question">
<tr>
    <td>Question:</td> 
    <td>
        <textarea class="questionTextArea" id="mainTextarea" rows="5" cols="40" name="questionText"></textarea>
    </td>
</tr>
</table>

<table id="optionAndAnswer" class="optionAndAnswer">
<tr>
      <th colspan="2">
        Option and Answer
    </th>
</tr>
<tr class="option">
<td>1. Option Type:</td>
<td>
<div class="box">
    <input type="text" name="gridValues" class="gridTxt maxRow" id="mainGridTxt" readonly="readonly" />
    <span href="#" class="showGrid" id="showGridId">[Open Grid]</span>
</div>



<table class="optionTypeTbl">
        <tr>
        <td>
        <input class="gridBtns gridBtnsOff" name="btnTrueorFalseName"  id="btnTrueorFalse"     type="button"  value="True or False"  />
        <input class="gridBtns gridBtnsOff" name="btnYesorNoName"  id="btnYesorNo"     type="button"  value="Yes or No"  />
        </td>
        </tr> 
        </table>
        
        </td>
</tr>
<tr class="numberAnswer">
<td>2. Number of Answers:</td>
<td>
<span class="na string" id="mainNa" >Only 1 Answer</span>
<input type="text" name="numberAnswer" class="numberAnswerTxt answertxt" id="mainNumberAnswerTxt" readonly="readonly" onChange="getButtons()" >
</td>
</tr>
<tr class="answer">
<td>3. Answer</td>
<td>

<table id="answerSection">
    <tr>
<td>
<input class="answerBtns answers answerBtnsOff" name="answerName[True]"  id="answerTrue"     type="button"      value="True"     onclick="javascript: btnclick(this, -1, true);"/>
<input class="answerBtns answers answerBtnsOff" name="answerName[False]" id="answerFalse"     type="button"   value="False"     onclick="javascript: btnclick(this, -1, true);"/>
<input class="answerBtns answers answerBtnsOff" name="answerName[Yes]"   id="answerYes"     type="button"   value="Yes"     onclick="javascript: btnclick(this, -1, true);"/>
<input class="answerBtns answers answerBtnsOff"...

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

.qid { 
    min-width:3%;
    max-width:3%;
    font-weight:bold;
    border:1px black solid;
    border-collapse:collapse;
}
    
.question { 
    min-width:14%;
    max-width:14%;
    border:1px black solid;
    border-collapse:collapse;
      line-height: 0;
}
    
.question textarea {
    min-width:auto;
    max-width:auto;
    resize:none;
    height:100%;
    font-size:100%;
      display: block; 

}

.noofanswers{
    min-width:15%;
    max-width:15%;
    padding-top:5%;
    padding-bottom:5%;
}

.noofreplies{
    min-width:3%;
    max-width:3%;
    border:1px black solid;
    border-collapse:collapse;
}

.optandans{
    min-width:30%;
    max-width:30%;
    border:1px black solid;
    border-collapse:collapse;
}

.option{
    min-width:100%;
    max-width:100%;
    padding-top:5%;
    padding-bottom:5%;
}

.weight { 
    min-width:3%;
    max-width:3%;
    border:1px black solid;
    border-collapse:collapse;
    }
    
.answer { 
    min-width:100%;
    max-width:100%;
    padding-top:5%;
    padding-bottom:5%;
     }
     
.audio{
    min-width:11%;
    max-width:11%;
    border:1px black solid;
    border-collapse:collapse;
    }
    
.video{
    min-width:11%;
    max-width:11%;
    border:1px black solid;
    border-collapse:collapse;
    }
    
.image{
    min-width:11%;
    max-width:11%;
    border:1px black solid;
    border-collapse:collapse;
    position:relative;
    }
    
.plusrow{
    min-width:2%;
    max-width:2%;
    border:1px black solid;
    border-collapse:collapse;
    }

.wrapper{
    text-align:left;
    display: inline-block;
}

#question{
   ...

JavaScript

var qnum = 1;
var qremain = 5;
var count = 0;
var gQuestionIndex = 0;
      
function insertQuestion(form) {   
    
            var context = $('#optionAndAnswer');
    var currenttotal = context.find('.answerBtnsOn').length;        
                
        alertErrors = "";
        // Note, this is just so it's declared...
        

 if (currenttotal < $('.answertxt', context).val()) {
        alertErrors += "\nYou have selected less answers than the required amount\n";
    }


    // Stop execution with a return
    if (alertErrors != "") {
        alert(alertErrors);
        return;
    }


    var $tbody = $('#qandatbl > tbody'); 
    var $tr = $("<tr class='optionAndAnswer' align='center'>");
    var $td = $("<td class='extratd'>");
    var $qid = $("<td class='qid'></td>").text(qnum);
    var $question = $("<td class='question'></td>");
    var $noofanswers = $("<div class='noofanswers'>2. Number of Answers:<br/></div>");
    var $options = $("<div class='option'>1. Option Type:<br/></div>");
    var $answer = $("<div class='answer'>3. Answer:<br/></div>");
    var $questionType = '';
    
    gQuestionIndex++;
    
        $('.questionTextArea').each( function() {
    
    var $this = $(this);
    var $questionText = $("<textarea class='textAreaQuestion'></textarea>").attr('name',$this.attr('name')+"[]")
                   .attr('value',$this.val());

    $question.append($questionText);
    
    });
    
    $('.gridTxt', context).each( function() {
        
    var $this = $(this);
    var $optionsText = $("<input type='text' class='gridTxtRow maxRow' readonly='readonly' />")
    .attr('name',$this.attr('name')+"[]")
    .attr('value',$this.val())
    .appendTo( $options )
    .after("<span href='#' class='showGrid'>[Open Grid]</span>");
    
    $questionType = $this.val();
    
    });
    
   $('.numberAnswerTxt', context).each(function() {
        var $this = $(this);
        var $noofanswersText = '';
        

    $noofanswersText = $("<span...