JSFiddle - React, Tailwind, and code Playground

by Jeremy Bolanos

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.2.1/underscore-min.js"></script>
<div id="main">
    <div id="wiz"></div>
</div>

CSS

#main {
    position: relative;
    height: 200px;
    width: 100%;
}
.colBox {
    float: left;
    width: 130px;
    height: 105px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    font-size: 12px;
}
ul {
    margin: 0;
    padding: 0;
}
li {
    cursor: pointer;
    list-style-type: none;
    margin: 0;
}
li.active {
    font-weight: 600;
}

JavaScript

function buildTech() {
    var container = document.getElementById('wiz');
    var vendorCol = document.createElement('div');
    vendorCol.id = 'colVendor';
    vendorCol.className = 'colBox';
    container.appendChild(vendorCol);

    var vendorUL = document.createElement('ul');
    vendorCol.appendChild(vendorUL);

    // populate colVendor
    $.each(sourceJSON, function (k, v) {
        var li = document.createElement('li');
        li.appendChild(document.createTextNode(k));
        vendorUL.appendChild(li);
        li.onclick = function () {
            $('#colArea, #colRegion, #colMarket, #colSwitch').remove();
            $('#colVendor li').siblings().removeClass('active');
            li.className = 'active';
            var group = _(sourceJSON[k]).groupBy('area');
            makeNextCol(group, 0);
        };
    });

    function makeNextCol(group, depth) {
        var element = ['region', 'market', 'switch'][depth];
        var domElement = ['colArea', 'colRegion', 'colMarket', 'colSwitch'][depth];
        var newCol = document.createElement('div');
        newCol.id = domElement;
        newCol.className = 'colBox';
        container.appendChild(newCol);
        var ul = document.createElement('ul');
        newCol.appendChild(ul);
        $.each(group, function (k, v) {
            var li = document.createElement('li');
            li.appendChild(document.createTextNode(k));
            ul.appendChild(li);
            li.onclick = function () {
                if(domElement !== 'colSwitch'){
                    clearCols(domElement);
                    var nextGroup = _(group[k]).groupBy(element);
                    makeNextCol(nextGroup, depth + 1);
                }
            };
        });
    }

    function clearCols(thisCol) {
        switch (thisCol) {
            case 'colArea':
                $('#colRegion, #colMarket, #colSwitch').remove();
                break;
            case 'colRegion':
                $('#colMarket,...