Search Function in JavaScript to retain item and will not disappear upon erasure

I am creating a simple data table where it shows me the values of tracking from a firebase realtime database I am generating the table via JavaScript. Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Build a table</title>
    <script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-analytics.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-database.js"></script>    
</head>
<body>
    <div class="container">
        <input id="searchbar" 
               onkeyup="search_animal()" 
               type="text" name="search" 
               placeholder="Search item..">

    </div>


    <script>
            // JavaScript code

            function search_animal() {
            let input = document.getElementById('searchbar').value
            input = input.toLowerCase();
            let x = document.getElementsByClassName('pritem');

            for (i = 0; i < x.length; i++) {
                if (!x[i].innerHTML.toLowerCase().includes(input)) {
                x[i].style.display = "none";
                }
                else {
                x[i].style.display = "xx";
                }
            }
            }

    </script>




    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }


        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 20px;
        }

        #searchbar {
            margin: 10px;
            padding: 10px;
            border-radius: 5px;
            width: 50%;
            box-sizing: border-box;
        }

        #list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .animals {
            font-size: 1.2em;
            padding: 10px;
            border-bottom: 1px solid #ccc;
            animation: fadeIn 0.5s ease-in-out;
        }

        .animals:last-child {
            border-bottom: none;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }        
    </style>

    <button onclick="addData()">CLICK ME</button>

    <style>
        table {
            text-align: center;
        }
    </style>

<table id = "list">

        <tbody id = 'xx'>
            <th width = 200 >Requesting Office</th>
            <th width = 200 >Mayor's Office</th>
            <th width = 200 >Treasury Office</th>
            <th width = 200 >Budget Office</th>
            <th width = 200 >Mayor's Office</th>
        </tbody>
</table>
</body>
<script src="build-table.js"></script>
</html>

For the generation of table here is my code:

  function generateTable(table, data) {
    for (let element of data) {
      let row = table.insertRow();
      
      for (key in element) {
        let cell = row.insertCell();
        row.setAttribute('class', "pritem")
        let text = document.createTextNode(element[key]);
        
        cell.appendChild(text);
      }
    }
  }

I am hauling the files from my realtime database values as follows:

firebase.initializeApp(firebaseConfig);  
  var ltbmofiles = firebase.database().ref("prLTBMO");
 
  
  ltbmofiles.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++) {
        mountains.push(placementObjectrValuesSplit[x]);
        console.log(placementObjectrValuesSplit[x])

    }
    let table = document.querySelector("table");
    // let data = Object.keys(mountains[0]);
    // generateTableHead(table, data);
    generateTable(table, mountains);

})

My problem with my code is this:

while it shows my search quite properly when I search “treasury” for example, it shows the treasury row searched. However, when you clear the search bar, it does not show the full table again and whenever you search a word it doesn’t show anything anything anymore. Any ideas why this happens and how can I fix it?

I tried putting the tag properly from the row, while it shows me the item properly, it disappears.