JSFiddle - React, Tailwind, and code Playground

HTML

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

<div id="detailsBlock">

<table id="question">
<tr>
<td colspan="2">
<a onclick="return plusbutton();">
<img src="Images/plussign.jpg" width="30" height="30" alt="Look Up Previous Question" class="plusimage" id="mainPlusbutton" name="plusbuttonrow"/>
</a>
<span id="plussignmsg">(Click Plus Sign to look up Previous Questions)</span>
</td>
</tr>
</table>

<table id="answerWeight">
<tr>
     <th colspan="2">
     Marks
     </th>
</tr>
<tr>
<td>Number of Marks:</td>
<td><input type="text" name="textWeight" class="txtWeight" id="mainTxtWeight" maxlength="5" onkeypress="return isNumberKey(event)"/></td>
</tr>
<tr>
<td colspan="2">Total Assessment Marks Remaining:<br/> <span id="total-weight"></span></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></th>
    <th class="weight">Number of Marks</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>

    <div id="answer_selections"><!-- Answers will go in divs for each question --></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;
}

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

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


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

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

    
.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;
}
    
.numberAnswerTxt{
    background-color: #F2F2F2;
    float:left;
    width:15%;
    font-weight:bold;
    display:none;
    font-size:85%;    
}

.numberAnswerTxtRow{
    background-color: #F2F2F2;
    float:center;
    width:15%;
    font-weight:bold;
    display:none;
    margin:auto;
    font-size:85%;    
}
              
.na{
    display:none;
    float:left;    
}

.naRow{
    float:center;    
    display:none;
}

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

JavaScript

var totalmarks = 20;

$(document).ready(function()

{
    
    $('#total-weight').html(totalmarks);
    
    $(document).on('change', '#qandatbl td.weight input', calculateTotal);

});





var qnum = 1;
var qremain = 10;
var count = 0;
var plusbutton_clicked;
var gQuestionIndex = 0;
      
function insertQuestion(form) {   
    
            var context = $('#optionAndAnswer');
    var currenttotal = context.find('.answerBtnsOn').length;        

    
    if (qnum > 10) {
    return;
}

var x = "<img src='Images/plussigndisabled.jpg' width='30' height='30' alt='Look Up Previous Question' class='plusimage' name='plusbuttonrow'/><span id='plussignmsg'>(Click Plus Sign to look <br/> up Previous Questions)</span>" ;




    var $tbody = $('#qandatbl > tbody'); 
    var $tr = $("<tr class='optionAndAnswer' align='center'>");
    var $td = $("<td class='extratd'>");
    var $plusrow = $("<td class='plusrow'></td>");
    var $weight = $("<td class='weight'></td>");
    var $questionType = '';
    
    gQuestionIndex++;
    
   
    
    $('.txtWeight').each( function() {
        
     var $this = $(this);
     var $weightText = $("<input type='text' class='txtWeightRow' maxlength='5' onkeypress='return isNumberKey(event)'/>").attr('name',$this.attr('name')+"[]")
                     .attr('value',$this.val());

    $weight.append($weightText);
    
    });

       

 
   
        $('.plusimage').each( function() {
    
    var $this = $(this);
    var $plusimagerow = $("<a onclick='return plusbutton(this);'><img src='Images/plussign.jpg' width='30' height='30' alt='Look Up Previous Question' class='imageplus'/></a>").attr('name',$this.attr('name')+"[]")
                   .attr('value',$this.val());

    $plusrow.append($plusimagerow);
    
    });
    
    $tr.append($plusrow);
    $tr.append($weight);   
    $tbody.append($tr);    
    
    count++;
    
    calculateTotal();
    
    $('.txtWeight').val('');

                        
}

function calculateTotal()
{
  ...