JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<!-- 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_organization_type" id="select_organization_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>
                <option value="Accredited School outside">Accredited School outside of California or the United States</option>
                <option value="Unaccredited School">Unaccredited School</option>
                <option value="Day care">Daycare/Childcare</option>
                <option value="Homeschool">Homeschool</option>
                <option value="non-profit">Non-profit, not located on a school site.</option>
            </select>
        </p>
    </div>
</div>
<!-- Group Question End-->
<!-- Private or Preschool Question Start-->
<div id="school_form-private-preschool-choice" style="display:none;">
    <div style="margin-top: 0px;">&nbsp;</div>
    <div id="question-1">
        <p>Are you a Private School or Preschool?&nbsp;</p>
        <p>
            <input type="radio" name="radio_is_pp" value="yes" />Yes
            <input type="radio" name="radio_is_pp" value="no" />No</p>
    </div>
</div>
</div>
<!-- Private or Preschool Question End-->

JavaScript

$("#select_organization_type").change(checkState);

function checkState() {
    var state = $('select').val();

    if (state == "Accredited California") {
        $('#school_form-group-choice').fadeOut('fast');
        $('#school_form-private-preschool-choice').fadeIn('fast');
    } else if (state == "Head Start or Child Development Center") {
        $('#school_form-group-choice').fadeOut('fast');
        $('#school_form-private-preschool-choice').fadeIn('fast');
    } else if (state == "Preschool (students are 2+ years)") {
        $('#school_form-group-choice').fadeOut('fast');
        $('#school_form-private-preschool-choice').fadeIn('fast');
    } else if (state == "Club") {
        $('#school_form-group-choice').fadeOut('fast');
        $('#school_form-private-preschool-choice').fadeIn('fast');
    } else {
        $('#school_form-group-choice').fadeOut('fast');
        showInlineError(3);
    }
}