Jquery Menu function not giving the expected output

Question

I am trying to add a json to the menu and show it on the frontend. I have created an HTML tree structure through recursive calling in javascript and I can see that structure seems ok, in the web console. The problem is that I am just seeing the parent object in the menu and the children objects do not appear as a submenu. I am not able to figure out what is the problem in the code and need some help.

Here is my javascript code:

$(function() {
    addMenuItems = function(parentMenuItem, currentNode){
        var divElement = document.createElement('div');
        // set the text for the list item
        divElement.innerHTML = currentNode.name;
        var listItem = document.createElement('li');
        listItem.appendChild(divElement);


        var currentMenuItem = document.createElement('ul');

        console.log("html current: " + parentMenuItem.innerHTML);
        console.log("html parent: " + listItem);

        // create the menu
        var child;

        for (child = 0; child < currentNode.children.length; child++){
            addMenuItems(currentMenuItem, currentNode.children[child]);
        }

        // add a submenu list to this list
        if(currentNode.children.length > 0){
            listItem.appendChild(currentMenuItem);
        }


        // add the child to the menu
        parentMenuItem.appendChild(listItem);

        console.log("html: " + parentMenuItem.innerHTML);

    };
    //End of function

    $("#menu").hide()

    var identifiedObjects = [];

    $("#Boma").mousedown(function(e) {
        if(e.button==2){
            var browserCoord = {x:e.pageX, y:e.pageY};
            console.log(browserCoord);
        }
    });

    document.getElementById("Boma").oncontextmenu = function () {return false;}

    $("#Boma").mousedown(function(e) {
        if(e.button==2)
        {
            $("#menu").css('left', e.pageX+5);
            $("#menu").css('top', e.pageY+5);
            $("#menu").fadeIn(100);
            $( "#menu" ).menu();
        }
    });

    $(document).click(function(e) {
        if(e.button==0){
            $("#menu").fadeOut(80);
        }
    });

    jQuery.getJSON("/new_veg.json", (data) => {
        console.log(data);
        addMenuItems(document.getElementById('menu'), data);
    });


});

Here is the json:

{
    "name":"vegetation",
    "id":"2",
    "children":[
        { 
            "name":"landuse",
            "id":"2.1",
            "children":[
                {
                    "name":"forest area",
                    "id":"2.1.1",
                    "children":[]
                },
                {
                    "name":"plantation",
                    "id":"2.1.2",
                    "children":[]
                }
            ]
        }
    ]
}