JSFiddle - React, Tailwind, and code Playground

by psot98

HTML

<script src="http://dl.dropboxusercontent.com/s/sl6opuosrhykuq0/Groups"></script>
 <div id="container"></div>

CSS

#container {
            width: 300px;
        }

        #selectable .ui-selecting {
            background: #FECA40;
        }

        #selectable .ui-selected {
            background: #F39814;
            color: white;
        }

        #selectable {
            float: left;
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 60%;
        }

            #selectable li {
                margin: 3px;
                padding: 0.4em;
                font-size: 1.4em;
                height: 18px;
            }

JavaScript

$(function(){
var groupTypes = null;

            var count = 0;
            var url='http://dl.dropboxusercontent.com/s/sl6opuosrhykuq0/Groups';
            $.getJSON(url, null, function (data) {
                groupTypes = data;
                var $list = $('<ol id="selectable" />');

                $.each(groupTypes, function (i, groupType) {
                    var $li = $('<li />');
                    $li
                        .addClass('ui-widget-content')
                        .attr('data-index', i)
                        .html(groupType.Name);

                    $list.append($li);

                    $li.on('click', function () {
                        count++;
                        var index = $(this).attr('data-index');
                        $(this).addClass('ui-selected').
                            parent().find('li').removeClass('ui-selected');
                        $('.speed').remove();

                        var speeds = groupTypes[index].GroupSpeeds;
                        console.log(speeds);
                        var $speedList = $('<ol class="speed" />');
                        $.each(speeds, function (i, speed) {
                            if (speed) {
                                var $speedLi = $('<li />');
                                $speedLi
                                    .addClass('ui-widget-content')
                                    .attr('data-index', i)
                                    .html(speed.Speed);

                                $speedList.append($speedLi);
                         

                            }
                        });

                        $('body').append($speedList);
                    });
                });

                $('#container').append($list);
            });
    });