JSFiddle - React, Tailwind, and code Playground

HTML

<form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validateForm(this);" >
<table id="middleDetails" border="1">
<tr>
      <th colspan="2">
        Option and Answer
    </th>
</tr>
<tr>
    <td>Option Type:</td> 
    <td>
        <select name="optionDrop" id="optionDropId" onChange="getDropDown()">
<option value="">Please Select</option>
<option value="abc">ABC</option>
<option value="abcd">ABCD</option>
<option value="abcde">ABCDE</option>
<option value="trueorfalse">True or False</option>
<option value="yesorno">Yes or No</option>
</select>
    </td>
    </tr>
<tr>
<td>Number of Answers:</td>
<td>
<span id="na">N/A</span>
<select name="numberDrop" id="numberDropId" onChange="getButtons()">
</select>
</td>
</tr>
<tr>
<td>Answer</td>
<td>
<input class="answerBtns" name="answerAName"     id="answerA"         type="button"      value="A"         onclick="javascript:btnclick(this);"/>
<input class="answerBtns" name="answerBName"    id="answerB"         type="button"   value="B"         onclick="javascript:btnclick(this);"/>
<input class="answerBtns" name="answerCName"     id="answerC"         type="button"      value="C"         onclick="javascript:btnclick(this);"/>
<input class="answerBtns" name="answerDName"     id="answerD"         type="button"      value="D"         onclick="javascript:btnclick(this);"/>
<input class="answerBtns" name="answerEName"     id="answerE"         type="button"   value="E"         onclick="javascript:btnclick(this);"/>
<input class="answerBtns" name="answerTrueName"  id="answerTrue"     type="button"      value="True"     onclick="javascript:btnclick(this);"/>
<input class="answerBtns" name="answerFalseName" id="answerFalse"     type="button"   value="False"     onclick="javascript:btnclick(this);"/>
<input class="answerBtns" name="answerYesName"   id="answerYes"     type="button"   value="Yes"     onclick="javascript:btnclick(this);"/>
<input class="answerBtns"...

CSS

/*css for QandATable.php*/
            
td { 
    vertical-align: top;
     }
.qid { 
    width: 40px; 
    }
.question { 
    width: 400px; 
    }
.question textarea {
    width: 380px; 
    height: 50px;
}
.weight { 
    width: 80px; 
    }
.weight input { 
    width: 70px;
     }
.answer { 
    width: 300px;
     }
.answer input { 
    width: 270px; 
    }
    
#numberDropId{
    display:none;
}
              
#na{
    display:none;
}

.answerBtns{
    display:none;
    background-color: #ffffff;
    border: #666666 1px solid;
    color: black;
    font-weight:bold;
    }
    
    .answerBtnsOff{
    background-color: #ffffff;
    border: #666666 1px solid;
    color: black;
    font-weight:bold;
 
}
 
.answerBtnsOn{
    background-color: green;
    border: #666666 1px solid;
    color: #ffffff;
    font-weight:bold;
}

JavaScript

$(document).ready(function ()
    {
        var OptDrop = new Array();

OptDrop.abc = ["",1,2];
OptDrop.abcd = ["",1,2,3];
OptDrop.abcde = ["",1,2,3,4];
OptDrop.trueorfalse = [1];
OptDrop.yesorno = [1];
        
        $("#optionDropId").change(function ()
        {
            var selectedValue = $(this).val();
            $("#numberDropId").html("");
            $.each(OptDrop[selectedValue], function (x, y)
            {
                $("#numberDropId").append($("<option></option>").attr("value", y).html(y));
            });
        }); 

        $("#optionDropId").change();
    });       

            var currenttotal=0;
function getButtons()
{
    document.getElementById("answerA").className="answerBtnsOff";
 
    document.getElementById("answerB").className="answerBtnsOff";
 
    document.getElementById("answerC").className="answerBtnsOff";
 
    document.getElementById("answerD").className="answerBtnsOff";
 
    document.getElementById("answerE").className="answerBtnsOff";
            
    document.getElementById("answerTrue").className="answerBtnsOff";
 
    document.getElementById("answerFalse").className="answerBtnsOff";
 
    document.getElementById("answerYes").className="answerBtnsOff";
 
    document.getElementById("answerNo").className="answerBtnsOff";
 
    currenttotal=0;
}
function btnclick(btn)
{
     if(document.getElementById("numberDropId").value=="")
     {
         alert('You must first select the number of answers you require from the drop down menu');
         return false;
    }
    if (btn.className=="answerBtnsOn")
    {
        btn.className="answerBtnsOff";
 
        currenttotal--;
        return false;
    }
     if(document.getElementById("numberDropId").value==currenttotal)
     {
          alert('You are not allowed beyond the limit of the number of answers you require, deselect other button');
         return false;
     }
    if (btn.className=="answerBtnsOff")
    {
        btn.className="answerBtnsOn";
       ...