I'm a beginner in Javascript programming. innerHTML method is not working in a function to update content of a HTML element.

My JS code is :

$(':button').on("click", function() {
  // reference clicked button via: $(this)
  var buttonElementId = $(this).attr('id');
  var sliceId = buttonElementId.charAt(buttonElementId.length - 1);
  bringData(sliceId);

})

function bringData(id) {
  var a = localStorage.getItem("Blogs")
  var b = JSON.parse(a)
  console.log(b[id].blogHeader)
  document.getElementById("foo").innerHTML = b[id].blogHeader
}

Buttons and element which has id of "foo" are at different HTML pages. I want to update content of that element after clicking any button from other page, but it is not working. The content still remains same. What is my mistake ?

Note : If I use innerHTML property out of a function, it works and content is changing.