JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://www.faa.net.au/stylesheets/femmes/femmes2.css">
<script src="http://www.faa.net.au/CatalystScripts/ValidationFunctions.js"></script>
<body>
    <div style="text-align: center;">
         <h1>Femmes Event Registration</h1>

    </div>
    <form action="/FormProcessv2.aspx?WebFormID=42898&amp;OID={module_oid}&amp;OTYPE={module_otype}&amp;EID={module_eid}&amp;CID={module_cid}" enctype="multipart/form-data" onsubmit="return checkWholeForm27389(this)" method="post" name="catwebformform27389">
        <p><span class="req">*</span> Required Fields</p>
        <div class="subfieldsset" style="width: 710px; background-color: #faebc7; padding: 10px;">
            <div class="section">PERSONAL INFORMATION</div>
            <div class="clear">
                <label for="Title">Title</label>
                <select class="cat_dropdown_smaller" id="Title" name="Title" style="width: 60px;">
                    <option selected="selected" value="668871"></option>
                    <option value="344671">Dr.</option>
                    <option value="398492">Hon.</option>
                    <option value="344670">Miss</option>
                    <option value="344668">Mrs</option>
                    <option value="344669">Ms</option>
                </select>
            </div>
            <div class="clear">
                <label for="FirstName">First Name <span class="req">*</span>
                </label>
                <input type="text" maxlength="255" class="cat_textbox" id="FirstName" name="FirstName" style="width: 180px;" />
                <label for="LastName">Last Name <span class="req">*</span>
                </label>
                <input type="text" maxlength="255" class="cat_textbox" id="LastName" name="LastName" style="width: 180px;" />
            </div>
            <div class="clear">
                <label for="HomeAddress">Address <span class="req">*</span>
                </label>
                <input...

JavaScript

$(function () {
   // $('.cat_dropdown').change(function () { //Commented as it was generic call
    $('#CAT_Custom_266107').change(function () {  //added for specific call
        alert($(this).val());
        $('#payMethod').toggle($(this).val() >= 2);
    });
});

$(document).ready(function () {
    $(".paymentmethod").click(function () {
        $(".paymentinfo").hide();
        switch ($(this).val()) {
            case "Credit Card Authorisation":
                $("#pay0").show("slow");
                break;
            case "Direct Deposit":
                $("#pay1").show("slow");
                break;
            case "Cash Payment (FAA Office)":
                $("#pay2").show("slow");
                break;
        }
    });
});

$(document).ready(function () {

    var submitcount27389 = 0;

    function checkWholeForm27389(theForm) {
        //alert("inside");
        var why = "";
        if (theForm.FirstName) why += isEmpty(theForm.FirstName.value, "First Name");
        if (theForm.LastName) why += isEmpty(theForm.LastName.value, "Last Name");
        if (theForm.HomeAddress) why += isEmpty(theForm.HomeAddress.value, "Home Address");
        if (theForm.HomeCity) why += isEmpty(theForm.HomeCity.value, "Home City");
        if (theForm.HomeState) why += isEmpty(theForm.HomeState.value, "Home State");
        if (theForm.HomeZip) why += isEmpty(theForm.HomeZip.value, "Home Zipcode");
        if (theForm.HomeCountry) why += checkDropdown(theForm.HomeCountry.value, "Home Country");
        if (theForm.EmailAddress) why += checkEmail(theForm.EmailAddress.value);
        if (theForm.HomePhone) why += isEmpty(theForm.HomePhone.value, "Home Phone Number");
        if (theForm.CAT_Custom_266106) why += checkDropdown(theForm.CAT_Custom_266106.value, "Available Dates:");
        if (theForm.CAT_Custom_266143) why += checkDropdown(theForm.CAT_Custom_266143.value, "Member Tickets:");
        if (theForm.CAT_Custom_266107) why +=...