JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://css-spinners.com/css/spinners.css">
<div id="container">
    <div class="holder">
        <div class="throbber" style="display:none;">Loading...</div>
    </div>
    <input type="text" id="zip" placeholder="Enter a zipcode for your school district." />
    <button type="submit" class="btn btn-primary">Submit</button>
    <div id="city" style="display:none;">
        <select id="schoollist" name="schoollist"></select>
    </div>
    <div id="err" style="display:none;"></div>
    <br />
<span id="results"></span>

</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 #container {
    width:80%;
    margin:0 auto;
    padding:0;
}
input, button, span, select, option {
    width:100%;
    margin-top:10px;
}
.holder {
    width:58px;
    margin:0 auto;
    padding:0;
}

JavaScript

var match = false;
$(".btn").on("click", function () {
    $("#schoollist").html("");
    $("#schoollist").fadeOut(1E3);
    $("#selectBox option[value='option1']").remove();
    $("#psa").remove();
    if ($("#zip").val().toLowerCase().length < "1") alert("Please Enter a Value!!!");
    else $.ajax({
        url: "http://files.hulea.org/california_schools.json",
        dataType: "jsonp",
        jsonpCallback: "functionReference",
        beforeSend: function () {
            $("#err_warning").remove();
            $(".throbber").fadeIn(1E3)
        },
        success: function (data) {
            $(".throbber").fadeOut(1E3);
            var match = false;
            for (var i = data.length - 1; i >= 0; i--) {
                var counties = data[i].County;
                var districts = data[i].District;
                var schools = data[i].School;
                var streets = data[i].Street;
                var cities = data[i].City;
                var zips = data[i].Zip;
                var states = data[i].State;
                var phones = data[i].Phone;
                var idx = zips.indexOf("-");
                zips = zips.substring(0, idx != -1 ? idx : zips.length);
                var zipMatch = zips.toLowerCase() === $("#zip").val().toLowerCase();
                if (zipMatch) {
                    match = true;
                    $("#schoollist").fadeIn(1E3);
                    $("#schoollist").append('<option value="' + schools + "," + streets + '">' + schools + "," + streets + "</option>")
                }
            }
            if (match) {
                $("#city").fadeIn(1E3);
                $("#err").hide()
            } else {
                $("#err").fadeIn(1E3);
                $("#err").html('<div id="psa">No school were found. Please Enter a new zip.</div>')
            }
        }
    });
    return false
});
$("#schoollist").on("change", function () {
    var index = $(this).val().indexOf(",");
    var schl =...