Dynamic Menu with jquery json data

i have try but doesn't work, i'm trying to make Dynamic Menu from Jquery json data. I hope someone can help me, i have insert preview below....................... Thank you. I'm working on fully custom ui, so i plan not to use Jquery.UI, hope someone else have a solution to solve this issue for me and thank again.

var data = {
        menu: [{
            name: 'Women Cloth',
            link: '0',
            sub: null
        },{
            name: 'Men Cloth',
            link: '1',
            sub: [{
                name: 'Arsenal',
                link: '0-0',
                sub: null
            }, {
                name: 'Liverpool',
                link: '0-1',
                sub: null
            }, {
                name: 'Manchester United',
                link: '0-2',
                sub: null
            }]
        }]};

    var getMenuItem = function (itemData) {
        var item = $("<li>", {
            class: 'has-children',
            id: itemData.id
        }).append(
        $("<a>", {
            href: itemData.link,
            html: itemData.name,
            id: itemData.id + '-links',
        }));
        if (itemData.sub) {
            var subMenuItem = $("<li>", {
            class: 'has-icon'
            }).append(
            $("<a>", {
                href: itemData.link,
                class: 'submenu-title',
            }));
            var subList = $("<ul>", {
                class: 'secondary-dropdown',
            });
            $.each(itemData.sub, function () {
                subList.append(subMenuItem(this));
            });
            item.append(subList);
        }
        return item;
    };
    var $menu = $("#Menu");
    $.each(data.menu, function () {
        $menu.append(
            getMenuItem(this)
        );
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="Menu"></ul>

Below is the output i needed.

<li class="has-children" id="ID">
    <a id="ID-links" href="links">Women Clothing</a>
    <ul class="cd-secondary-dropdown is-hidden">
        <li class="go-back"><a>Back</a></li>
        <li class="has-icon"><a class="submenu">submenu 1</a></li>
        <li class="has-icon"><a class="submenu">submenu 2</a></li>
        <li class="has-icon"><a class="submenu">submenu 3</a></li>
        <li class="has-icon"><a class="submenu">submenu 4</a></li>
        <li class="has-icon"><a class="submenu">submenu 5</a></li>
    </ul>
</li>

<li class="has-children" id="ID">
    <a id="ID-links" href="links">Men Clothing</a>
    <ul class="cd-secondary-dropdown is-hidden">
        <li class="go-back"><a>Back</a></li>
        <li class="has-icon"><a class="submenu">submenu 1</a></li>
        <li class="has-icon"><a class="submenu">submenu 2</a></li>
        <li class="has-icon"><a class="submenu">submenu 3</a></li>
        <li class="has-icon"><a class="submenu">submenu 4</a></li>
        <li class="has-icon"><a class="submenu">submenu 5</a></li>
    </ul>
</li>