JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head></head>
    <body>
        <select id='its_city' name='its_city' onChange='create_cities();'><option value=''></option>
<option value='Sydney'>Sydney</option>
<option value='Melbourne'>Melbourne</option>
<option value='Perth'>Perth</option>
<option value='Adelaide'>Adelaide</option>
<option value='Brisbane'>Brisbane</option>
<option value='Auckland'>Auckland</option>
</select>
          <table width="99%" border="0" align="center">
                    <tr>
                        <td width="10">&nbsp;</td>
                        <td width="77" valign="top"><strong>University</strong></td>
                        <td colspan="2"><strong>Date of Interview 
                        <br>
                        (if known)</strong></td>
                    </tr>
                    <tr  id='1pack'>
                        <td valign="top"><strong>1.</strong></td>
                        <td valign="top">
                            <select name="UniversityName1" id="UniversityName1" onChange="create_uni_element(1);">
                                <option value=''></option>
                            </select>
                            <div id="uniname1"></div>
                        </td>
                        
                        <td><input name="UniversityDate1" type="text" id="UniversityDate1" readonly="readonly" size="8"></td>
                    </tr>
                    <tr id='2pack' style='display:none'>
                        <td valign="top"><strong>2.</strong></td>
                        <td valign="top">
                            <select name="UniversityName2" id="UniversityName2" onChange="create_uni_element(2);">
                                <option value=""></option>
                            </select>
                            <div id="uniname2"></div>
                        </td>
                        
                        <td><input name="UniversityDate2" type="text" id="UniversityDate2" size="8"...

JavaScript

function connectToServer(url,param,rtnDataType){
    if (window.XMLHttpRequest){
        xhr=new XMLHttpRequest();
    }
    else{
        xhr=new ActiveXObject("Microsoft.XMLHTTP");
    }
    var tempData = "";
    xhr.open("POST",url,false);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(param);    
    if(rtnDataType == "xml")
        this.tempData = xhr.responseXML;
    else
        this.tempData = xhr.responseText;
    return this.tempData;    
}

//Method to verify security code
function verifyCode(){
    var param = "security_code="+encodeURI(document.getElementById('security_code').value);
    var url = "../../lib/captcha/verify_captcha.php";
    var ok = true;
                var tempData = connectToServer(url,param,"text");
    if(tempData != 1){
        document.getElementById('security_code').value = "";
        var param = "width="+encodeURI(100)+"&height="+encodeURI(40)+"&characters="+encodeURI(5);
        var url = "lib/captcha/CaptchaSecurityImages.php";
        document.getElementById('security_check').src=document.getElementById('security_check').src
        alert("Security Code mismatch: Please re-enter the code");
        ok = false;
    }
    return ok;
}

//Function to change security code
function changeSecurityCode(){
    document.getElementById('security_check').src=document.getElementById('security_check').src;
}

function verifySum(){
if(document.getElementById('sum').value != ""){
        if(parseInt(document.getElementById('num1').value)+ parseInt(document.getElementById('num2').value) != document.getElementById('sum').value){
            document.getElementById('sum').value = "";
                        document.getElementById('num1').value = Math.floor(Math.random()*15)
                        document.getElementById('num2').value = Math.floor(Math.random()*15)
                        alert("Sum of the two numbers is wrong");
        }
    }
}

function create_uni_element(val){
   ...