JSFiddle - React, Tailwind, and code Playground

by korchev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<div id="container">
    <div>
        <a id="setState" href="#">Set State</a>
        <a id="setCity" href="#">Set City</a>
        <a id="show" href="#">Show</a>
    </div>
    <input id="state" name="state" data-bind="value: state"/>
    <input id="city" name="city" data-bind="value: city"/>
    <div id="result"></div>
</div>

JavaScript

var array = [
        { 'city':'Birmingham', 'state':'Alabama' },
        { 'city':'Huntsville', 'state':'Alabama' },
        { 'city':'Mobile', 'state':'Alabama' },
        { 'city':'Montgomery', 'state':'Alabama' },
        { 'city':'Anchorage', 'state':'Alaska' },
        { 'city':'Chandler', 'state':'Arizona' },
        { 'city':'Gilbert', 'state':'Arizona' },
        { 'city':'Glendale', 'state':'Arizona' },
        { 'city':'Mesa', 'state':'Arizona' },
        { 'city':'Peoria', 'state':'Arizona' },
        { 'city':'Phoenix', 'state':'Arizona' },
        { 'city':'Scottsdale', 'state':'Arizona' },
        { 'city':'Surprise', 'state':'Arizona' },
        { 'city':'Tempe', 'state':'Arizona' },
        { 'city':'Tucson', 'state':'Arizona' },
        { 'city':'Little Rock', 'state':'Arkansas' },
        { 'city':'Anaheim', 'state':'California' },
        { 'city':'Antioch', 'state':'California' },
        { 'city':'Bakersfield', 'state':'California' },
        { 'city':'Berkeley', 'state':'California' },
        { 'city':'Burbank', 'state':'California' },
        { 'city':'Carlsbad', 'state':'California' },
        { 'city':'Chula Vista', 'state':'California' },
        { 'city':'Concord', 'state':'California' },
        { 'city':'Corona', 'state':'California' },
        { 'city':'Costa Mesa', 'state':'California' },
        { 'city':'Daly City', 'state':'California' },
        { 'city':'Downey', 'state':'California' },
        { 'city':'El Cajon', 'state':'California' }
    ];
    var states = [];
    var cities = {};
    $.each(array, function (idx, value) {
        if (cities[value.state]) {
            cities[value.state].push({ city:value.city });
        } else {
            states.push({ state:value.state });
            cities[value.state] = [
                { city:value.city }
            ];
        }
    });

    var state = $("#state").kendoDropDownList({
        dataTextField: "state",
        dataValueField:"state",
        dataSource:    {
    ...