Dynamically Created HTML element in an old Page shows in New Page

I am using plain NAVIGATION to navigate between two pages. Few Contents of first page is dynamically created

  <ul style="width:200px;float:left;display: inline-block;padding:5px" data-role="listview" id="listView1" data-inset="true"></ul> 
  <ul style="width:200px;float:right;display: inline-block;padding:5px" data-role="listview" id="listView2" data-inset="true"></ul>

I am appending LIST item in this List dynamically in first page

var $li = $("<li>").attr("data-filtertext",msg.userID).appendTo("#listView1");
        $("<a>").attr("href","#")
                .attr("id",msg.userID)
                .text(msg.userID)
                .appendTo($li)
                .css("background", "#F68D78");
        $("#listView1").listview('refresh')

I am navigating to another page using this menu

<div class="topnav" id="myTopnav">
    <a href="./index">Dashboard</a>
    <a href="./history">History</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
</div>

But when I am in new page I see ListItems which I had added dynamically in Index.ejs still shows in the new loaded page history.ejs but if I load history.ejs by simple refresh then the old ListItems does not show. The pages are all hosted by NodeJS and there are ROUTES to reach each one of them

via Abhishek Dhar