AddEventListener works one time and deprected after this

when I use the input field for the first time: the page does something like it is refreshed ( the data in the input field is removed), but after that whatever I type into the input field no nothing happens.

here is the code:

function searchPage(){
    // adding search Bar
    let searchBar = `<div id="SearchBar" data-aos="zoom-in-up" class="container w-95">
    <div class="row g-4 ">
        <h1 class="text-center text-white">Find Your Favorite meal!</h1>
        <div class="col-6">
            <input id="searchname" type="text" class="form-control bg-black" placeholder="Search By Name">
        </div>
        <div class="col-6">
            <input id="searchletter" type="text" class="form-control bg-black" maxlength="1" placeholder="Search By First Letter">
        </div>
        </div>
    </div>`
    homeContainer.innerHTML = searchBar; 
    let sName = document.querySelector("#searchname")
    let sletter = document.querySelector("#searchletter")
    sName.addEventListener("keyup", function(event) {
        console.log("check event1");
        event.preventDefault(); // Prevent form submission
        getMealsByName(this.value).then(function(data) {
            deafultView(data); 
        })
    })
    sletter.addEventListener("keyup", function(event) {
        console.log("check event2");
        event.preventDefault(); // Prevent form submission
        getMealsByLetter(this.value).then(function(data) {
            deafultView(data); 
        })
    })
}

and this is the code that call the function

$("#search").click(function(){
    closeSideBar()
    searchPage();
})

I tried a lot of things but all same results.

As suggested in the comments, you shouldn’t re-create the whole thing each time you click, but instead only “activate” it.

document.addEventListener('DOMContentLoaded', function () {
  /* creating your search tools once on load */

  // adding search Bar
    let searchBar = `<div id="SearchBar" data-aos="zoom-in-up" class="container w-95">
    <div class="row g-4 ">
        <h1 class="text-center text-white">Find Your Favorite meal!</h1>
        <div class="col-6">
            <input id="searchname" type="text" class="form-control bg-black" placeholder="Search By Name">
        </div>
        <div class="col-6">
            <input id="searchletter" type="text" class="form-control bg-black" maxlength="1" placeholder="Search By First Letter">
        </div>
        </div>
    </div>`
    homeContainer.innerHTML = searchBar; 

    // hide searchBar
    document.getElementById('SearchBar').style.display = 'none';

    let sName = document.querySelector("#searchname")
    let sletter = document.querySelector("#searchletter")
    sName.addEventListener("keyup", function(event) {
        console.log("check event1");
        event.preventDefault(); // Prevent form submission
        getMealsByName(this.value).then(function(data) {
            deafultView(data); 
        })
    })
    sletter.addEventListener("keyup", function(event) {
        console.log("check event2");
        event.preventDefault(); // Prevent form submission
        getMealsByLetter(this.value).then(function(data) {
            deafultView(data); 
        })
    });

    document.getElementById('search').addEventListener('click', function() {
        closeSideBar();
        searchPage();
    });

}, false);

function searchPage() {
    // display searchBar
    document.getElementById('SearchBar').style.display = 'block';
}