JSFiddle - React, Tailwind, and code Playground

by Ken Z

HTML

<table>
        <tr>
            <td>
                <div id="dvList1">
                </div>
            </td>
            <td>
                <a href="#" id="hlGSL">Generate Sorted list</a>
            </td>
            <td>
                <div id="dvList2">
                </div>
            </td>
        </tr>
    </table>

CSS

#dvList1{
	 font-family: "Courier New";
	 border: 1px solid black;
	 width: 400px;
	 height: 500px;
	 overflow: scroll;
}
#dvList2{
	 font-family: "Courier New";
	 border: 1px solid black;
	 width: 400px;
	 height: 500px;
	 overflow: scroll;
}

ul {
    
}

li.hidden ul {
    display: none;
}

li.leaf{
	list-style-image: url("../Images/Folder.JPG");
	cursor: default;
}

li.leafhidden{
	list-style-image: url("../Images/Folder.JPG");
	cursor: default;
}

li.hidden{
	list-style-image: url("../Images/plusFolder.JPG");
	cursor: default; 

}

li{
	list-style-image: url("../Images/minusFolder.JPG");
	cursor: default;
	-moz-user-select: -moz-none;
    
	
}




li {
    cursor: pointer;
}

li.leaf {
    cursor: default;
}

JavaScript

var dataSource = ({
    "Pen": ({
        "Parker": ({
            "P1": ({}),
                "P2": ({})
        }),
            "Cello": ({
            "C2": ({}),
                "C1": ({})
        })
    })
}),
    Objectkeys = function(obj){
        a = []
        for(var prop in obj){
            if (obj.hasOwnProperty(prop)) {
             a.push(prop);
            }
        };
        return a;
    },
    traverseObject = function (obj) {
        var ul = document.createElement("ul"),
            li,span;

        for (var prop in obj) {
			li = document.createElement("li");
	        li.appendChild(document.createTextNode(prop));
            li.style.backgroundColor = "green";
            li.onclick = function(e) {
                var classNames = this.className;
                if (classNames.indexOf("hidden") == -1) {
                    this.className += "hidden";
				} else {
                    this.className = this.className.replace("hidden", "");
                }
				if (!e)
					e = window.event;
					if (e.stopPropagation) {
					  e.stopPropagation();
					}
				else {
					e.cancelBubble = true;
				}
			}
            if (typeof obj[prop] == "object" && Objectkeys(obj[prop]).length) {
				
                li.appendChild(traverseObject(obj[prop]));
            } else {
                li.className += "leaf";
            }
            ul.appendChild(li);
            console.log(ul);
        }
        return ul;
    },
    sortedObject = function (obj) {
		document.getElementById("dvList2").innerHTML = "";
        var ul = document.createElement("ul"),
            li,keys = Objectkeys(obj).sort();
        for (prop in keys) {
        var li = document.createElement("li");
            li.appendChild(document.createTextNode(keys[prop]));
            li.onclick = function(e) {
                var classNames = this.className;
                if (classNames.indexOf("hidden") == -1) {
                    this.className += "hidden";
				} else {
       ...