Help me to solve the error

in below code when I try to click on button which runs getRecipe01() but the recipe details is not displaying.

<!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">
    <link rel="shortcut icon" href="../img/RecipeLogo.jpeg" type="image/x-icon">
    <link rel="stylesheet" href="../css/hca_style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
    <title>Express Eat</title>
    <script></script>
</head>
<body>

    <!-- Navigation Bar -->
    <div class="header">
        <nav class="nav-bar">
            <img src="../img/Logo.png" class="brand-name">
            <a href="#" class="hamburger">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </a>
            <div class="menu-bar">
                <ul>
                    <li><a href="home.php">Home</a></li>
                    <li><a href="../insert_recipe.html">Modify</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </div>
        </nav>
        <!-- Search Bar -->
        <br>
        <div class="title" style="margin-bottom: -20px;">Find a Recipe</div>
        <div class="search-wrapper">
            <div class="fa fa-search"></div>
            <input type="text" name=""  id="search" placeholder="What do you want to eat?" onkeyup="searchRecipe(this.value)">
            <div class="fa fa-times" onclick="clearInput()" ></div>
        </div>
    </div>

    <!-- Search Results -->
    <div class="result" style="height: fit-content;">
        <br>
    </div>

    <!-- Main Content -->
    <div class="card-grid" >
        <div class="food-list" id="food-list">
        <?php
        // Database connection code here
        $conn = mysqli_connect("localhost", "root", "", "wp");
        $searchTerm = isset($_GET['search']) ? $_GET['search'] : '';
        $sql = " SELECT * FROM recipes WHERE dishName LIKE '%$searchTerm%' ORDER BY recipe_id DESC ";
        $result = mysqli_query($conn, $sql);
        while($rows=$result->fetch_assoc()){
            print('<div class="card card-shadow" >');
                print('<div class="card-header card-image">');
                print("<img src='../img/" . $rows['file1'] . "' alt='Recipe Image'>");
                print('</div>');
                print('<div class="card-body" >');
                print('<h3>' . $rows['dishName'] . '</h3>');
                print('<h4>' . $rows['recipe_id'] . '</h4>');
print('</div>');
                print('<div class="card-footer">');
                print('<button class="btn" onclick="getRecipe01(' . $rows['recipe_id'] . ')">Get Recipe</button>');
                print('</div>');
            print("</div>");
        }
        // Close database connection
        mysqli_close($conn);
        ?>
        </div> 

    </div>

    <!-- Recipe Details Container -->
    
    

    <!--Footer-->
    <div class="footer">
        <div class="social-btn">
            <a href="https://www.facebook.com/Cmedsss" target="_blank" ><i class="	fab fa-facebook"></i></a>
            <a href="https://www.instagram.com/tiaanmeds/" target="_blank" ><i class="	fab fa-instagram"></i></a>
            <a href="https://www.linkedin.com/in/tianmeds/" target="_blank"><i class="	fab fa-linkedin"></i></a>
            <a href="https://github.com/TianMeds" target="_blank" "><i class="	fab fa-github"></i></a>
        </div>
        <div class="quick-bar">
            <a href="home.html">Home</a>
            <a href="/insert_recipe.html">Modify</a>
            <a href="about.html">About</a>
            <a href="contact.html">Contact</a>
        </div>
        <p>Copyright &copy; 2022 Christian Medallada. All right reserved</p>  
    </div>

    <!--Ending of Footer-->

<!--Script for Javascript-->
<script src="../js/index.js"></script>
<script>
function isUserLoggedIn(){
    const isLoggedIn = checkLoginStatus();

    // If the user is not logged in, redirect to login.html
    if (!isLoggedIn) {
        document.getElementById("loginButton").addEventListener("click", function() {
            window.location.href = "login.html";
        });
    }
    else{ window.location.href = "login.html";}
}
function checkLoginStatus() {
    // Check if the user has a valid session token
    const sessionToken = localStorage.getItem("sessionToken");
    if (!sessionToken) {
        return false;
    }

    // Check if the session token is still valid
    const response = fetch("/api/validate-token", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Authorization": `Bearer ${sessionToken}`
        }
    });

    if (!response.ok) {
        return false;
    }

    return true;
}

function searchRecipe(searchTerm) {
  const recipes = document.querySelectorAll('.card');
  recipes.forEach((recipe) => {
    const title = recipe.querySelector('h3').textContent.toLowerCase();
    if (title.includes(searchTerm.toLowerCase())) {
      recipe.style.display = 'block';
    } else {
      recipe.style.display = 'none';
    }
  });
}

function getRecipe01(${data.recipe_id}) {
  // Make an AJAX request to fetch the recipe details
  fetch(`home2.php?recipe_id=${recipe_id}`)
    .then((response) => response.json())
    .then((data) => {
      // Display the recipe details
      const recipeDetails = document.querySelector('recipe-details').style.display = "block";
      recipeDetails.innerHTML = `
      <div class="meal-detail" id="meal-detail">
        <!-- recipe close btn -->
            <button type = "button" class = "btn recipe-close-btn" id = "recipe-close-btn" onclick="closeBtn()">
                <i class ="fas fa-times"></i>
            </button>

            <!-- recipe details -->
                
            <div class="meal-content">
                <div class = "meal-img">
                    <img src="../img/${data.file1}" alt="${data.dishName}">
                </div>
                <h2 class="meal-name">${data.dishName}</h2>
                <div class="meal-about">
                    <h3 class="meal-title-about">About Meal</h3>
                </div>
                <div class = "meal-instruct">
                    <h3>Ingridients:</h3>
                    <p>Ingredients: ${data.ingredients}</p>
                    <h3>Instruction:</h3>
                    <p>Instructions: ${data.instructions}</p>
                </div>
            </div>
        </div>
    </div>
    `; 
  });
}
</script>
</body>
</html>