sharepoint enterprise – Dynamic list navigation linking abnormally


I created a dynamic horizontal navigation menu that gets its data from SharePoint lists. It renders and works great but I am dealing with a situation that is very abnormal. The items in the navigation are all links but link that’s in the DOM and the link that I see when I hover over them are different. When I click the item, it always leads me to a broken page. See below for an example.
enter image description here

Someone please explain why this is happening and how to fix. Here’s the code:

var cacheNavData = ();
var cacheSubNavData = ();
var cacheMegaMenuData = ();
var cacheCategoryMenuData = ();

$(document).ready(function(){
    getData("Training Navigation").done(function(data1){
        cacheNavData = data1.d.results;
            console.log(cacheNavData);        
        getData("Sub Navigation").done(function(data2){
            cacheSubNavData = data2.d.results;
            console.log(cacheSubNavData);
            getData("Mega Menu Category").done(function(data3){
                cacheMegaMenuData = data3.d.results;
                getData("category menu").done(function(data4){
                    cacheCategoryMenuData = data4.d.results;
                    //alert(cacheCategoryMenuData)
                    createNavigation(cacheNavData);
                });
            });
        });
    });
})
function getData(lName){
    var endPointUrl=_spPageContextInfo.webAbsoluteUrl;
    if (lName != "Sub Navigation") {    
        endPointUrl+= "/_api/web/lists/getbyTitle('" + lName + "')/items";
    }else {
        endPointUrl+="/_api/web/lists/getbyTitle('" + lName + "')/items?$select=parentNav/URL, parentNav/URLNAME,subLink&$expand=parentNav";
    }
    
    return $.ajax({
        url: endPointUrl,
        type: "GET",
        headers: {
            "accept":"application/json;odata=verbose"
        }
    }); 
}
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}

function createNavigation(navData) {
    var topNav = document.getElementById("myTopnav");
    for (var x = 0; x < navData.length; x++) {
        if (navData(x).dropDown === "no") {
            var aLink = _createEl("a");
            var aTextNode = document.createTextNode(navData(x).URLNAME);
            aLink.href = navData(x).URL;
            aLink.appendChild(aTextNode);
            topNav.appendChild(aLink);
        } else if (navData(x).dropDown === "yes") {
            var buildSubNavigation;
            buildSubNavigation = buildSubNavBar(navData(x));
            topNav.appendChild(buildSubNavigation);
        } else {
            //build megamenu
            var buildSubNavigation;
            buildDirectorateNav = buildDirectorateMegaMenu(navData(x));
        }
    }
}

function buildDirectorateMegaMenu(navDataID) {
    var buildNav;
    var topNav = document.getElementById("myTopnav");
    buildNav = buildSubNavBar(navDataID, "training");  //Build mega menu and attach in buildSubNavBar()
    topNav.appendChild(buildNav);
}

function buildSubNavBar(subNavID, isDirectorate) {
    //create div and add dropdown class
    var ddDiv = _createEl("div");
    if(isDirectorate === "training"){
        ddDiv.classList.add("Mdropdown");
    }else{
        ddDiv.classList.add("dropdown");
    }
    //create button and add text
    var btn = _createEl("button");
    if(isDirectorate === "training"){
        btn.classList.add("Mdropbtn");
    }else{
        btn.classList.add("dropbtn");
    }
    var btnText = document.createTextNode(subNavID.URLNAME);
    
    var aLink = _createEl("a");
    var aTextNode = document.createTextNode(btnText.data);
    aLink.href = subNavID.URL;
    aLink.appendChild(aTextNode);
    
    //append the text to the button
    btn.appendChild(aLink);

    //create i tag and add "fa fa-caret-down" classes
    var itag = _createEl("i");
    itag.classList.add("fa");
    itag.classList.add("fa-caret-down");
    btn.appendChild(itag);
    ddDiv.appendChild(btn);

    var ddContent = _createEl("div");
    ddContent.classList.add("dropdown-content");
    for (var i = 0; i < cacheSubNavData.length; i++) {
        if (cacheSubNavData(i).parentNav.URLNAME=== subNavID.URLNAME  && cacheSubNavData(i).parentNav.URLNAME !== "Training") {
            var li = _createEl("li");
            var a = _createEl("a");
            var aTextNode = document.createTextNode(cacheSubNavData(i).subLink.Description);

            a.href = cacheSubNavData(i).subLink.Url;
            a.appendChild(aTextNode);
            ddContent.appendChild(a);  
        }
    }

    if(isDirectorate === "training"){
        //alert("I ");
        //create div and add dropdown class
        var megaDivDropDown = _createEl("div");
        megaDivDropDown.classList.add("dropdown");

        var megaBtn = _createEl("button");
        megaBtn.classList.add("dropbtn");

        megaDivDropDown.appendChild(megaBtn);
        var megaI = _createEl("i");
        megaI.classList.add("fa");
        megaI.classList.add("fa-caret-down");

        megaBtn.appendChild(megaI);

        var megaDDivContent = _createEl("div");
        megaDDivContent.classList.add("Mdropdown-content");

        var headerDiv = _createEl("div");
        headerDiv.classList.add("Mheader");

        var megaH2 = _createEl("h2");
        var h2Text = document.createTextNode("Team Sites");

        megaH2.appendChild(h2Text);
        headerDiv.appendChild(megaH2);
        megaDDivContent.appendChild(headerDiv);

        var megaDDivRow = _createEl("div");
        megaDDivRow.classList.add("Mrow");

        //Loop through categories & sub-categories items
        for (var i = 0; i < cacheMegaMenuData.length; i++) {
            var megaDivCol = _createEl("div");
            megaDivCol.classList.add("Mcolumn");
            var colHr = _createEl("h3");
            var colHrText = document.createTextNode(cacheMegaMenuData(i).category);
            colHr.appendChild(colHrText);
            megaDivCol.appendChild(colHr);
            for (var x = 0; x < cacheCategoryMenuData.length; x++) {
                if (cacheMegaMenuData(i).category === cacheCategoryMenuData(x).category) {
                    var colAnchor = _createEl("a");
                    colAnchor.href = cacheCategoryMenuData(x).menuUrl;
                    var menuColText = document.createTextNode(cacheCategoryMenuData(x).menuItem);
                    colAnchor.appendChild(menuColText);

                    megaDivCol.appendChild(colAnchor);
                    megaDDivRow.appendChild(megaDivCol);
                    megaDDivContent.appendChild(megaDDivRow);
                    ddDiv.appendChild(megaDDivContent);
                }
            }
            //create the other stuff
            //console.log(megaDivCol)
            console.log("megaDdivRow:");
            console.log(ddDiv);
        }
    }
    ddDiv.appendChild(ddContent);
    return ddDiv;
}    
function _createEl(el) {
    return document.createElement(el);
}

I created a mock-up, but it really does behave the same way because it come from an array of objects.

I hope someone can help me with this. It’s mind boggling and I’ve been dealing with this for DAYS.