How to make the Realtime Database data hauled in HTML, “searchable”

I have made a table data in HTML that has no content, basically just a th and a tr. Now, I haul the innerHTML of it and used my firebase data to change the value of the th and the tr. My only problem is it needs a second before it gets read, and now, whenever I use the search bar that I made, it does not read the new value of the th and the tr, rather, it only shows the premade values.

Is there a way to make this happen where the new data is searchable?

Here is how I changed the innerhtml:

firebase.initializeApp(firebaseConfig);
var firebaseRef = firebase.database().ref("message");
firebaseRef.on("value", function (snapshot) {
  var placementObjectrValuesSplit = Object.values(snapshot.val());
  valueMax = placementObjectrValuesSplit;
  // will show undefined if not defined or not yet present
  for (var x = 0; x <= placementObjectrValuesSplit.length - 1; x++) {
    // document.getElementById("date" + x).innerHTML = placementObjectrValuesSplit[x].pr[0];
    // document.getElementById("name" + x).innerHTML = placementObjectrValuesSplit[x].pr[1];
    // document.getElementById("sendoffice" + x).innerHTML = placementObjectrValuesSplit[x].pr[2];
    // document.getElementById("prNumber" + x).innerHTML = placementObjectrValuesSplit[x].pr[3];
    document.getElementById("recoffice" + x).innerHTML =
      placementObjectrValuesSplit[x].pr[4];
    // document.getElementById("reason" + x).innerHTML = placementObjectrValuesSplit[x].pr[5];
  }
});

For example, I have the original value of the first as “Treasury Office” and then, haul the innerhtml from the database.

However, whenever I search it:

What’s worse, if I erase the search, realtime database data does not refresh!