JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<br />
    <div class="group-container overHidden">
        <h3>Start the automatic data filtering by selecting a Country</h3>
        <br />

        <div class="overHidden">
            <div class="comboGroup">
                <div>Country</div>
                <span id="comboCountry"></span>
            </div>
            <div class="comboGroup">
                <div id="state">State</div>
                <div id="district">District</div>
                <span id="comboDistrict"></span>
            </div>
            <div class="comboGroup">
                <div>Town</div>
                <span id="comboTown"></span>
            </div>
        </div>
    </div>

CSS

.label-container {
            margin: 5px 0;
        }

        span[id^="combo"] {
            margin-right: 15px;
        }

        #state, #stateCascading {
            display: none;
        }

        .group-container {
            padding: 10px;
            margin-bottom: 10px;
            clear: both;
        }

        .group-title {
            font-weight: bold;
        }

        .comboGroup {
            float: left;
        }

        .overHidden {
            overflow: hidden;
        }

JavaScript

$(function () {
var dsCountry, dsCascTowns, dsCountryCascading,
            dsCountryCascading, dsStatesUSCascading, dsDistrictBGCascading;

        dsCountry = [
			{ txtCountry: "United States", valCountry: "US" },
			{ txtCountry: "Bulgaria", valCountry: "BG" }
        ];

        dsCascDistrict = [
			{ keyCountry: "US", txtDistrict: "New Jersey", valDistrict: "NJ" },
			{ keyCountry: "US", txtDistrict: "California", valDistrict: "CA" },
			{ keyCountry: "US", txtDistrict: "Illinois", valDistrict: "IL" },
			{ keyCountry: "US", txtDistrict: "New York", valDistrict: "NY" },
			{ keyCountry: "US", txtDistrict: "Florida", valDistrict: "FL" },
			{ keyCountry: "BG", txtDistrict: "Sofia", valDistrict: "SA" },
			{ keyCountry: "BG", txtDistrict: "Plovdiv", valDistrict: "PV" },
			{ keyCountry: "BG", txtDistrict: "Varna", valDistrict: "V" },
			{ keyCountry: "BG", txtDistrict: "Burgas", valDistrict: "B" },
            { keyCountry: "BG", txtDistrict: "Stara Zagora", valDistrict: "SZ" }
        ];

        dsCascTowns = [
			{ keyDistrict: "NJ", textTown: "Atlantic City", valTown: "AtlanticCity" },
			{ keyDistrict: "NJ", textTown: "Dover", valTown: "Dover" },
			{ keyDistrict: "NJ", textTown: "Paterson", valTown: "Paterson" },
			{ keyDistrict: "NJ", textTown: "Elizabeth", valTown: "Elizabeth" },
			{ keyDistrict: "NJ", textTown: "Edison", valTown: "Edison" },
			{ keyDistrict: "CA", textTown: "Los Angeles", valTown: "LosAngeles" },
			{ keyDistrict: "CA", textTown: "San Francisco", valTown: "San Francisco" },
			{ keyDistrict: "CA", textTown: "San Diego", valTown: "SanDiego" },
			{ keyDistrict: "CA", textTown: "San Jose", valTown: "San Jose" },
			{ keyDistrict: "CA", textTown: "Fresno", valTown: "Fresno" },
			{ keyDistrict: "IL", textTown: "Chicago", valTown: "Chicago" },
			{ keyDistrict: "IL", textTown: "Dakota", valTown: "Dakota" },
			{ keyDistrict: "IL", textTown: "New Canton", valTown: "New Canton" },
			{ keyDistrict: "IL", textTown: "Astoria", valTown:...