JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dvList1"></div>
<a href="" id="hlGSL">Generate Sorted list</a>

CSS

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

ul {
    list-style: none;
}

li.hidden ul {
    display: none;
}

li:before {
	
    content: url("http://oi62.tinypic.com/2q2ea8j.jpg");
	padding-right:25px;
    width: 10px;
    display: inline-block;
}

li.hidden:before {
	content:url("http://oi61.tinypic.com/9acxs9.jpg");
	padding-right:25px;
    
}

li.leaf:before {
    content: url("http://oi57.tinypic.com/jsg8oy.jpg");
	padding-right:25px;
}

li {
    cursor: pointer;
}

li.leaf {
    cursor: default;
}

JavaScript

var dataSource = ({
    "Pen": ({
        "Parker": ({
            "P1": ({}),
                "P2": ({})
        }),
            "Cello": ({
            "C2": ({}),
                "C1": ({})
        })
    })
}),
    traverseObject = function (obj) {
        var ul = document.createElement("ul"),
            li;
        var keys = Object.keys(obj).sort();
        for (prop in keys) {
            li = document.createElement("li");
            li.appendChild(document.createTextNode(keys[prop]));
            

            if (typeof obj[keys[prop]] == "object" && Object.keys(obj[keys[prop]]).length) {
                li.appendChild(traverseObject(obj[keys[prop]]));
            } else {
                li.className += "leaf";
            }
            ul.appendChild(li);
            console.log(ul);
        }
        return ul;
    };


window.onload = function () {
document.getElementById("dvList1").appendChild(traverseObject(dataSource));
  //  document.getElementById("hlGSL").onclick = function(){document.getElementById("dvList2").appendChild(sortedObject(dataSource));}
}