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">
    <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="">
    <title>Express Eat</title>

    <!-- 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>
            <div class="menu-bar">
                    <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>
        <!-- Search Bar -->
        <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>

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

    <!-- Main Content -->
    <div class="card-grid" >
        <div class="food-list" id="food-list">
        // 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);
            print('<div class="card card-shadow" >');
                print('<div class="card-header card-image">');
                print("<img src='../img/" . $rows['file1'] . "' alt='Recipe Image'>");
                print('<div class="card-body" >');
                print('<h3>' . $rows['dishName'] . '</h3>');
                print('<h4>' . $rows['recipe_id'] . '</h4>');
                print('<div class="card-footer">');
                print('<button class="btn" onclick="getRecipe01(' . $rows['recipe_id'] . ')">Get Recipe</button>');
        // Close database connection


    <!-- Recipe Details Container -->

    <div class="footer">
        <div class="social-btn">
            <a href="" target="_blank" ><i class="	fab fa-facebook"></i></a>
            <a href="" target="_blank" ><i class="	fab fa-instagram"></i></a>
            <a href="" target="_blank"><i class="	fab fa-linkedin"></i></a>
            <a href="" target="_blank" "><i class="	fab fa-github"></i></a>
        <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>
        <p>Copyright &copy; 2022 Christian Medallada. All right reserved</p>  

    <!--Ending of Footer-->

<!--Script for Javascript-->
<script src="../js/index.js"></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())) { = 'block';
    } else { = 'none';

function getRecipe01(${data.recipe_id}) {
  // Make an AJAX request to fetch the recipe details
    .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>

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