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">
        Question Number <span id="questionNum">1</span>
    </th>
      <th colspan="2">
        Option and Answer
    </th>
</tr>
<tr>
    <td rowspan="3">Question:</td> 
    <td rowspan="3">
        <textarea rows="5" cols="40" name="questionText"></textarea>
    </td>
    <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"  ...

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

function isNumberKey(evt)
      {
         var charCode = (evt.which) ? evt.which : event.keyCode
         if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;

         return true;
      }

   function getDropDown() {
         var optionDrop = document.getElementsByName("optionDrop");
        var na = document.getElementById("na");
        var numberDrop = document.getElementsByName("numberDrop");
        var answerA = document.getElementById("answerA");
        var answerB = document.getElementById("answerB");
        var answerC = document.getElementById("answerC");
        var answerD = document.getElementById("answerD");
        var answerE = document.getElementById("answerE");
        var answerTrue = document.getElementById("answerTrue");
        var answerFalse = document.getElementById("answerFalse");
        var answerYes = document.getElementById("answerYes");
        var answerNo = document.getElementById("answerNo");
        
    if (optionDrop[0].value == "abc" || optionDrop[0].value == "abcd" || optionDrop[0].value == "abcde"){
                    numberDrop[0].style.display = "block";
                    na.style.display = "none";
        
    }else if (optionDrop[0].value == "trueorfalse" || optionDrop[0].value == "yesorno"){            
                    numberDrop[0].style.display = "none";
                    na.style.display = "block";
                   
    }
       
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));
    });
    
}); 
         }