JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<div class="bl_center bl_schoolvisit">
     <h2>School Visit Reservation Request</h2>

    <p>Hello! We are now taking requests to visit through August 31. We will begin to process requests for the 2013 - 2014 school year on August 15.</p>
    <p>Summer Camps! Please submit your request to our Group Sales department.</p>
    <p>Thank you!</p>
    <div class="blClear"></div>
    <div class="bl_block">
        <div class="bl_block2">
            <form id="form-school_form-registration" name="form-school_form-registration" method="post" action="">
                <!-- - - step 1 The Questions - -->
                <div id="step-1" style="display:block;" class="step">
                    <!-- Group Question Start-->
                    <div id="school_form-group-choice">
                        <div style="margin-top: 0px;">&nbsp;</div>
                        <div id="school_form_selection question-0">
                            <p>First Lets Select What kind of organization are you?&nbsp;</p>
                            <p>
                                <select name="select_group_type" id="select_group_type" class="required">
                                    <option value="" selected="selected">Choose</option>
                                    <option value="Accredited California">Accredited California School</option>
                                    <option value="Head Start or Child Development Center">Head Start or Child Development Center</option>
                                    <option value="Preschool (students are 2+ years)">Preschool (students are 2+ years)</option>
                                    <option value="Club">Club, after school program or non-profit located at a school site and providing academic instruction to students.</option>
                      ...

JavaScript

_err = "";
_posted = false;
_add_more = 1;
_num_groups = 7;
_blur_check = false;
var _err_msg = "";
var _zip_found = false;
var _processMsg = "<img class='loading' src='/site/files/images/rloader.gif' alt='Processing...' style='margin-left:10px;margin-right:10px;margin-top:20px;' /> Please wait while we process your request.";
var _minute_options = '<option value="">< Min ></option><option value="00">00</option><option value="15">15</option><option value="30">30</option><option value="45">45</option>';
var _todays_date = new Date();
var _black_out_dates = [];
var _active_list, _organization_type, _school_name, _school_zip = "";

/*
 * init method
 */
window.onload = function () {

    $(function () {
        $("#error-dialog").dialog({
            autoOpen: false,
            bgiframe: true,
            modal: true,
            position: top,
            closeOnEscape: true,
            buttons: {
                "Ok": function () {
                    $(this).dialog("close");
                }
            }
        });
    });

    $(function () {
        $("#processing-dialog").dialog({
            autoOpen: false,
            bgiframe: true,
            modal: true,
            position: top,
            closeOnEscape: true,
            draggable: false,
            width: 324
        });
    });

    $("select[name='select_group_type']").change(checkState);
    //First Lets Select What kind of organization are you?
    function checkState() {
        var state = $("select[name='select_group_type']").val();

        if (state == "Accredited California") {
            $('#school_form-group-choice').fadeOut('fast');
            $('#school_form-private-preschool-choice').fadeIn('fast');
            $('#results_block').fadeIn('fast');
            $("#results").html("<b>Group:</b> " + state);
        } else if (state == "Head Start or Child Development Center") {
            $('#school_form-group-choice').fadeOut('fast');
           ...