JSFiddle - React, Tailwind, and code Playground

HTML

<div class="scrollmenu" id="myHeader">

		<a style="float:left" href="index.html">Menu</a>
		
</div>
	
	<button id="prev"> Go Back </button>

	<button id="ext"> Go Forward </button>

CSS

body 
{
  margin: 0;
  font-family: Arial;
}
.top-container 
{
  background-color: #f1f1f1;
  padding: 2px;
  text-align: center;
}
div.scrollmenu {
    background-color: #0000A0;
    overflow: auto;
    white-space: nowrap;
}

div.scrollmenu a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 15px;
    text-decoration: none;
}

div.scrollmenu a:hover {
    background-color: #777;
}

JavaScript

data = 
{
    "persons": [{
        "id": "1",
        "name": "Angie",
        "link": "*",
        "prev": [ { "id" : "6",
                    "name" : "Jeanette"}],
        "ext": [ { "id" : "4",
                   "name" : "Angela"}]    
    },    
    {
        "id": "2",
        "name": "Rana",
        "link": "Rana.html",
        "prev": [ { "id" : "7",
                     "name" :"Angelika"}],
        "ext": [ { "id" : "5",
                     "name" :"Mona"}]    
    },
    {
        "id": "3",
        "name": "Tamara",
        "link": "Tamara.html",
        "prev": [ { "id" : "4",
                     "name" : "Angela"}],
        "ext": [ { "id" : "8",
                     "name" :"Tala"}]             
    }
]}


var id;
var name;
var link;
var prev;
var ext;


for (var key in data) {
for (var i = 0; i < data[key].length; i++) {
        id_persons = data[key][i].id;
        name = data[key][i].name;
        ext = data[key][i].ext;
        prev = data[key][i].prev;
        link = data[key][i].link;

    // just like add the add all the actors     
    for (var j = 0; j < ext.length; j++) {
        var ext_person = ext[j].name;
        var id_ext = ext[j].id;

		}
    for (var p = 0; p < prev.length; p++) {
        var prev_person = prev[p].name;
        var id_prev = prev[p].id;
    }

        // --------------------------------------------------------------------------- //
        // menu_bar_knows is for the prev elements //
        var menu_bar_prev = document.createElement('a');
        menu_bar_prev.id = id_prev;
        
        menu_bar_prev.innerHTML =
        prev_person + '</a>';
        // End of menu_bar_knows elements // 
        // --------------------------------------------------------------------------- //

        // --------------------------------------------------------------------------- //
        // menu_bar is for the main path elements //
        var menu_bar = document.createElement('a');
        menu_bar.className =...