How to add subitem on each item click dynamically in HTML treeview

See more:

HTML

treeview

Hi,
I have a treeview that should have items and sub items.
This should be my pattern like,
|111
|||222
|444
|||333
|555
|||666
.
.
.
.etc
So based on my above example, So when I click on '111', it should generate '222' under '111' as a sub item only once, which is applicable for '444' and '555'. My requirement is '111' is a folder and '222' is subfolder. So when I click on a folder, then it should generate the subfolders inside that folder. Please help how to do this

What I have tried:

HTML

<li id='click'>".$folderList[$ind]."</li>

Javascript

<script>
var handleAdd = function (event) {
    var $this = $(this);
    if ($this.children('ul').length > 0) {
        $('<li></li>').appendTo($this.children('ul'));
    } else {
        $('<ul><li></li></ul>').appendTo($this);
    }
    event.stopPropagation();
};
$(document).on('click', 'li', handleAdd);
</script>