How do i fix the result without reloading the site?

Question

Whenever I am writing apple or samsung, It is showing results, but if I don't refresh the page for the second time, it gives me error. However, If I reload the website, then it is showing me the results of samsung or oppo or whatever. Can you please tell me where I made the mistake ? I am attaching the HTML and JS below :

// error handle
const displayHandle = (direction, id) => {
        const errorMessage = document.getElementById(id);
        errorMessage.style.display = direction;
    }
    // clear previous result
const clearSearchResult = (direction) => {
        const searchResult = document.getElementById(direction);
        searchResult.innerHTML = '';
    }
    // details button action form
const allDetails = (id) => {
        // console.log(id)
        fetch(`https://openapi.programming-hero.com/api/phone/${id}`)
            .then(response => response.json())
            .then(data => {

                const sensorName = data.data.mainFeatures.sensors;

                let storeSensorName = '';
                for (const sensor of sensorName) {
                    storeSensorName = `${storeSensorName} ${sensor}, `
                }
                const mobileDetails = document.getElementById('show-details');
                mobileDetails.innerHTML = `
          <div  class=" row row-cols-1 row-cols-md-3 g-4">
              <div class="col">
                <div class="card">
                  <img src=${data.data.image} class="card-img-top w-50 h-50" alt="...">
                  <div id="details-body" class="card-body">
                    <h5 class="card-title">Brand: ${data.data.brand}</h5>
                    <p class="card-text">Storage: ${data.data.mainFeatures.storage}</p>
                    <p class="card-text">ChipSet: ${data.data.mainFeatures.chipSet}</p>
                    <p class="card-text">DisplaySize: ${data.data.mainFeatures.displaySize}</p>
                    <p class="card-text">Sensors : ${storeSensorName}</p> 
                  </div>
                </div>  
              </div> 
          </div>     
          `;

                // inject release Date 
                const container = document.getElementById('details-body');
                const p = document.createElement('p');
                if (data.data.releaseDate) {
                    p.innerText = `Release Information:${data.data.releaseDate}`;
                    container.appendChild(p);
                } else {
                    p.innerText = `Release Information Not Found`;
                    container.appendChild(p);
                }
            });
    }
    //search button action form
document.getElementById('search-btn').addEventListener('click', function() {
    clearSearchResult('show-details');
    clearSearchResult('show-mobile');
    displayHandle('none', 'error-message');
    displayHandle('none', 'show-all-Button')
        // get search field
    const searchBox = document.getElementById('search-box');
    const searchData = searchBox.value;



    fetch(`https://openapi.programming-hero.com/api/phones?search=${searchData}`)
        .then(res => res.json())
        .then(data => {
            if (data.data.length != 0) {
                displayMobile(data.data)
            } else {
                displayHandle('block', 'error-message');
            }
        })
        // clear search field 
    searchBox.value = ' ';
})

const displayMobile = (mobiles) => {
    // console.log(phones);
    const showMobile = document.getElementById('show-mobile');
    let count = 0;
    for (const mobile of mobiles) {
        if (count < 20) {
            const div = document.createElement('div');
            div.classList.add("col");
            div.innerHTML = `
                  <div class="card d-flex align-items-center">
                    <img src=${mobile.image} class="card-img-top w-50 h-50" alt="...">
                    <div class="card-body">
                      <h5 class="card-title">Model : ${mobile.phone_name}</h5>
                      <p class="card-text">Brand : ${mobile.brand}</p>
                      <button class="card-button" onclick="allDetails('${mobile.slug}')">Details</button>
                    </div>
                  </div>  
            `;
            showMobile.appendChild(div);
        } else {
            displayHandle('block', 'show-all-Button');
        }

        count++;
    }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- connection with bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <style>
        .display-handle {
            display: none;
            color: rgb(231, 49, 49);
        }
        
        .card-button {
            color: white;
            background-color: brown;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <!-- search box section 
    ----------------->
    <section class="container w-75 mx-auto pt-5">
        <h5 id="error-message" class="display-handle text-center">Not found..! Press authentic data...</h5>
        <h3 class="text-center bg-dark text-white">Mobile Maya</h3>
        <div class="input-group mb-3">
            <input id="search-box" type="text" class="form-control" placeholder="Enter your desired mobile " aria-label="" aria-describedby="button-addon2">
            <button class="btn btn-success" type="button" id="search-btn">Search</button>
        </div>
    </section>

    <!-- display products details   -->
    <section id="show-details" class="container">
        <!-- inject details here  -->
    </section>

    <!-- search result display section  
   ---------------------------------->
    <section class="container pt-5">
        <div id="show-mobile" class=" row row-cols-1 row-cols-md-3 g-4">

        </div>
    </section>
    <!-- show all button  -->
    <section class="container">
        <div class="d-flex justify-content-center">
            <button style="color: white; background-color:tomato; border-radius: 8px;" id="show-all-Button" class="display-handle" type="button" class="btn btn-primary">Show All</button>
        </div>
    </section>



    <!-- connection with js 
    ----------- -->
    <script src="js/app.js"></script>
    <!-- connection with bootstrap script  -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>

</html>