jQuery when apply issue

Question

I am making dynamic menu using REST API. It have parent child connection. As below

Now write code as below

Here is my document ready

$(document).ready(function () {
        var url = "/sites/devbc/_api/lists/getbytitle('NavigationMenu')/items?$select=Id,Title,MenuLevel,Link,hasSubMenu&$filter=Active eq 1 and MenuLevel eq 'Top Level'";
        var html = "";
        $.ajax({
            url: url,
            method: "GET",
            headers: { "Accept": "application/json; odata=verbose" }
        }).then(function (data) {
            var promises = data.d.results.map(function (item, i) {
                if (item.hasSubMenu == 'Yes') {
                    return getSubMenu(item.Id).then(function (subMenu) {
                        return '<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="' + item.Link + '">' + item.Title + '</a>' + subMenu + '</li>';
                    });
                }
                else {
                    return '<li class="nav-item"><a class="nav-link" href="' + item.Link + '" target="' + newTab(item.Link) + '">' + item.Title + '</a></li>';
                }
            });
            return $.when.apply(null, promises).then(function () {
                $("#navMenu").html(Array.prototype.join.call(arguments, ''));
            });
        });
        $("#navMenu").html(html);
    });

And this is my functions.

function getSubMenu(id) {
        var url = "/sites/devbc/_api/lists/getbytitle('NavigationMenu')/items?$select=Id,Title,Link,hasSubMenu,ParentMenu/Id&$filter=ParentMenu/Id eq " + id + "&$expand=ParentMenu/Id";
        return $.ajax({
            url: url,
            method: 'GET',
            headers: {
                'Accept': 'application/json; odata=verbose'
            }
        }).then(function (data) {
            var html = '<ul class="dropdown-menu">';
            var arr = data.d.results.map(function (item, i) {
                if (item.hasSubMenu == 'Yes') {
                    return getSubMenu(item.Id).then(function (subMenu) {
                        console.log('<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="' + item.Link + '" target="' + newTab(item.Link) + '">' + item.Title + '</a>' + subMenu + '</li>');
                        return '<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="' + item.Link + '" target="' + newTab(item.Link) + '">' + item.Title + '</a>' + subMenu + '</li>';
                    });
                }
                else {
                    html += '<li><a class="dropdown-item" href="' + item.Link + '" target="' + newTab(item.Link) + '">' + item.Title + '</a></li>';
                }
            });
            html += '</ul>';
            return html;
        });
    }
    function newTab(link) {
        if (link.indexOf("http") > -1)
            return "_blank"
        else
            return ""
    }

Now issue is that I am calling getSubMenu recursive but thing is that it is making HTML tag but not concatenating properly. Second recursive is not concatenating. Please somebody help me