JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <LINK rel="stylesheet" type = "text/css" href = "TreeView.css" />
    <style type = "text/css">
        #container{
            width: 300px;
            overflow: auto;
            
        }
        ul{
            background-color:red;
        }
        ul li:hover
        {
            <!--
            LIST ITEMS DO NOT HAVE HOVER ATTRIBUTE IN IE7
            -->
            background-color:blue;
        }
    </style>
</head>
<body>
    <div id = "RadTreeView RadTreeView_Default">
    <ul class = "rtUL rtLines">
        <li id = "rlLI rtFirst" value = "1337"><div>Item1<div></li><li class = "rtLI" id = "e"><div>Item2</div></li>
    </ul>
    </div>
    <div id = "test2">
        <div>
        
        </div>
        <ul>
            <li></li>
        </ul>
    </div>
</body>
</html>

CSS

.RadTreeView
{
    white-space:nowrap;
    cursor: default;
}

.RadTreeView .rtTop,
.RadTreeView .rtMid,
.RadTreeView .rtBot,
.RadTreeView .rtUL
{
    zoom:1;
}

.RadTreeView .rtSp,
.RadTreeView .rtImg,
.RadTreeView .rtIn,
.RadTreeView .rtChk
{
    vertical-align:middle;
}

.RadTreeView .rtUL
{
    margin: 0;
    padding: 0;
    -moz-user-select: -moz-none;
}

.RadTreeView .rtLI
{
    list-style-image: none;
    list-style-position: outside;
    list-style: none;
}

.RadTreeView .rtUL .rtLI .rtUL
{
    padding-left: 20px;
}

.RadTreeView .rtTop, 
.RadTreeView .rtMid, 
.RadTreeView .rtBot
{
    padding: 1px 0 1px 20px;
}

/* <expand/collapse images> */

ul > li {
    padding-left: 10px;
}

.RadTreeView .rtPlus, 
.RadTreeView .rtMinus
{
    font-size: 0;
    padding: 0;
    display: -moz-inline-box;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin: 6px 7px 0 -18px;
    width: 11px;
    height: 11px;
    background-repeat: no-repeat;
}

* html .RadTreeView .rtPlus, 
* html .RadTreeView .rtMinus { margin-right: 1px; }
*+html .RadTreeView .rtPlus, 
*+html .RadTreeView .rtMinus { margin-right: 1px; }

.RadTreeView .rtPlus { background-position: 0 0; }
.RadTreeView .rtPlusHover { background-position: 0 -22px; }
.RadTreeView .rtMinus { background-position: 0 -11px; }
.RadTreeView .rtMinusHover { background-position: 0 -33px; }

/* </expand/collapse images> */

/* <tristate checkboxes> */

.RadTreeView .rtChecked,
.RadTreeView .rtUnchecked,
.RadTreeView .rtIndeterminate
{
    display: -moz-inline-box;
    display: inline-block;
    width: 13px;
    height: 13px;
    vertical-align: middle;
    margin: 0 3px 0 0;
    line-height: 0;
    font-size: 0;
}

.RadTreeView .rtChecked { background-position: 0 0; }
.RadTreeView .rtUnchecked { background-position: 0 -13px; }
.RadTreeView .rtIndeterminate { background-position: 0 -26px; }

/* </tristate checkboxes> */

.RadTreeView .rtSp
{
    display: -moz-inline-box;
    display: inline-block;
   ...

JavaScript

$(function() {
    $("ul li div").click(function() {
        clicker(this);
    });
});

function flipClass(item1, class1, class2) {
    item1 = $(item1);
    if (item1.hasClass(class1) || item1.hasClass(class2)) {
        if (item1.hasClass(class1)) {
            item1.removeClass(class1);
            item1.addClass(class2);
        }
    } else {
        item1.addClass(class2);
    }
}

function setClasses(clickedItem) {
    $(clickedItem).each(function() {
        if ($(this).parent().has("ul").length) { //there are children here
            flipClass($(this).children("span[class='rtMinus'], span[class='rtPlus']"), "rtPlus", "rtMinus");

        } else { //there were no children
            flipClass($(this).children("span[class='rtPlus'], span[class='rtMinus']"), "rtMinus", "rtPlus");
        }
    });
}

function clicker(x) {
    //x is the clicked ListItem
    if (!$(x).next().is("ul") || $(x).next().length == 0) {
        //ajax request here.... where on success does the next line with a for-loop.
        /*  */
        /*  */
        $(x).parent().append(
        $("<ul class = 'rtUL'>").append(
        $("<li class = 'rtLI'>").html(
        $("<div>").attr("id", "ID_OF_ITEM1").addClass("{CurrentLevel}").append(
        $("<span class = 'rtSp'>")).append(
        $("<span class = 'rtPlus'>")).append(
        $("<span>").addClass("rtIn").html("test1")).click(function() {
            clicker(this);
        }))).append(
        $("<li class = 'rtLI'>").html(
        $("<div>").attr("id", "ID_OF_ITEM2").addClass("{CurrentLevel}").append(
        $("<span class = 'rtSp'>")).append(
        $("<span class = 'rtPlus'>")).append(
        $("<span>").addClass("rtIn").html("test2")).click(function() {
            clicker(this);
        }))));
        setClasses(x);
    } else if ($(x).next().is("ul")) {
        $(x).next().slideUp(function() {
            var temp = $(this).siblings("div");
            $(this).remove();
            setClasses($(temp));
       ...