JSFiddle - React, Tailwind, and code Playground

HTML

<div id='page_nav'>
    <!-- Navigation Elements -->
</div>

JavaScript

var pages = {

    "home": {
        "resource_name": "Home",
            "name": "Home Page",
            "header": "Featured"
    },

        "catalogue": {
        "resource_name": "Browse",
            "name": "Browse Catalogue",
            "header": "Public Catalogue"
    }

};


$(document).ready(function () {
    for (var key in pages) {
        if (pages.hasOwnProperty(key)) {
           
            $('#page_nav').append($('<a />', {
                id: 'nav_' + key
            }).text(pages[key].name))
                .append($('<br />'))
                .append($('<br />'));

            //Create a new callback for the Menu Navigation Element
            $('#nav_' + key).click(createCallBack(key));
        }
    }

});

//Function for returning a callback
function createCallBack(key) {
    return function () {
        alert("Callback fired");
    }
}