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="questionBtn" align="center">
<tr>
<th>
<input id="addQuestionBtn" name="addQuestion" type="button" value="Add Question" onClick="insertQuestion(this.form)" />
</th>
</tr>
</table>

</div>
<hr/>

<div id="details">
<table id="qandatbl" align="center">
<thead>
<tr>
    <th class="qid">Question No</th>
    <th class="question">Question</th>

</tr>
</thead>
<tbody>
</tbody>
</table>
</div>



</form>

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

.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;
}
    
.question textarea {
    min-width:auto%;
    max-width:auto%;
    resize:none;
    height:auto%;
    font-size:100%;
}     

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

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

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

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


#detailsBlock{    
    text-align:center;
}



#addQuestionBtn{
    font-weight:bold;
    height:30px;
    width:150px;    
    cursor:pointer;
    font-size:85%;
}

.questionTextArea{
    width:98%;
    resize:none;
    font-size:100%;
}


#details{
    height:200px;
    overflow:auto;
}

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;        


    var $tbody = $('#qandatbl > tbody'); 
    var $tr = $("<tr class='optionAndAnswer' align='center'>");
    var $qid = $("<td class='qid'></td>").text(qnum);
    var $question = $("<td class='question'></td>");
    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);
    
    });

          $('.num_questions').each( function() {
    
    var $this = $(this);
    
     var $questionNumber = $("<input type='hidden' class='num_questionsRow'>").attr('name',$this.attr('name')+"[]")
                   .attr('value',$this.val());
    
     $qid.append($questionNumber);                             
    
    ++qnum;    
    $(".questionNum").text(qnum);
    $(".num_questions").val(qnum);

    
     --qremain;
    $(".questionRemain").text(qremain);
 
});
    
    $tr.append($qid);
    $tr.append($question);
    $tbody.append($tr);    
    
    count++;
    
    $(form).find('.numberOfQuestions').val(qnum);
    form.questionText.value = "";
    
    $('.questionTextArea').val('');
  
                        
}