Loads another page one time but dont load if we press button again

Question

I have a section which contains data about particular item. I have written a JS code.When someone clicks on detail it is redirected to next page without reload that is good but if we go again on previous section and again click on detail. It doesnot work.

Here is my section html

<div class="recent-orders">
    <h2>Customers</h2>
    <table id="recent-orders-table">
        <thead>
            <tr>
                <th>Customer Id</th>
                <th>Customer Name</th>
                <th>City</th>
                <th>Contact</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>UZAIR</td>
                <td>Lahore</td>
                <td class="success">03233337187</td>

                <!-- Classes available for status text color warning,success,danger,primary -->

                <td class="primary"> <a class="detail_c_each" data-href="./index?detail_customer=31"> Details </a> </td>


            </tr>
            <tr>
                <td>2</td>
                <td>UZAIR</td>
                <td>Lahore</td>
                <td class="success">03233337187</td>

                <!-- Classes available for status text color warning,success,danger,primary -->
                <td class="primary"> <a class="detail_c_each" href="./index?detail_customer=31"> Details </a> </td>

            </tr>
            <tr>
                <td>3</td>
                <td>UZAIR</td>
                <td>Lahore</td>
                <td class="success">03233337187</td>

                <!-- Classes available for status text color warning,success,danger,primary -->
                <td class="primary"> <a class="detail_c_each" href="./index?detail_customer=32"> Details </a> </td>

            </tr>

        </tbody>
    </table>
    <!-- <a href="javascript:;" id="show-all">Show All</a> -->
</div>

Here is my JS Code

$(document).ready(function () {
  let sideMenu = document.querySelector("aside");
  let menuBtn = document.querySelector("#menu-btn");
  let closeBtn = document.querySelector("#close-btn");
  let themeToggler = document.querySelector(".theme-toggler");
  let detailCustomerEach = document.querySelectorAll(".detail_c_each");
  let sidebar_a = document.querySelectorAll(".sidebar_a");
  let alerts = document.querySelectorAll(".alert");

  $(menuBtn).click(function () {
    sideMenu.style.display = "block";
    $(sideMenu).removeClass("animate__animated animate__slideOutLeft");
    $(sideMenu).addClass("animate__animated animate__slideInLeft");
  });

  $(sidebar_a).click(function (e) {
    // load another page without reloading

    if ($(sidebar_a).hasClass("active")) {
      $(sidebar_a).removeClass("active");
    }

    e.preventDefault();
    $(this).addClass("active");
    setTimeout(() => {
      let url = $(this).attr("data-href");
      // show page content and change the url
      $(".recent-orders").load(url + " .recent-orders", function () {
        window.history.pushState(null, null, url);
      });
    }, 500);
    $(".recent-orders").load("./inc/preloader.html");
  });

  $(detailCustomerEach).click(function (e) {
    // load section detail customer without reloading
    e.preventDefault();

    // load another page without reloading
    let url = $(this).attr("data-href");
    // show page content after 2 seconds and change the url
    setTimeout(() => {
      $(".recent-orders").load(url + " .recent-orders", function () {
        window.history.pushState(null, null, url);
      });
    }, 500);

    $(".recent-orders").load("./inc/preloader.html");
  });

  // hide alert after 2 seconds
  $(alerts).each(function () {
    setTimeout(
      function () {
        $(this).fadeOut("slow");
      }.bind(this),
      2000
    );
  });

  $(closeBtn).click(function () {
    // sideMenu.style.display = "none";
    $(sideMenu).removeClass("animate__animated animate__slideInLeft");
    $(sideMenu).addClass("animate__animated animate__slideOutLeft");
  });

  $(".add-product").click(function () {
    window.open("./index", "_self");
  });

  // change theme
  $(themeToggler).click(function () {
    document.body.classList.toggle("dark-theme-variables");
    themeToggler.querySelector("span:nth-child(1)").classList.toggle("active");
    themeToggler.querySelector("span:nth-child(2)").classList.toggle("active");
  });
});

Here is my page code that is shown on first click but not on 2nd click

<div class="recent-orders cust_det ">
    <h2> Customer Detail</h2>
    <div class="customer_detail">
        <form id="form-submit" action="" method="POST" class="c_form animate__animated animate__fadeIn">

            <?php
            if (isset($_GET['success'])) {
                echo "<div class='alert alert-success'>
                            <strong>Success!</strong> Your question has been submitted.
                        </div>";
            }
            if (isset($_GET['error'])) {
                echo "<div class='alert alert-danger'>
                            <strong>Sorry!</strong> Your question has not been submitted.
                        </div>";
            }
            ?>

            <div class="row">
                <div class="c_detail">
                    <label for="" class="form-labels">Name</label>
                    <input type="text" name="cat_id" value="<?php echo $category_id  ?>" id="cat_id">
                </div>
                <div class="c_detail">
                    <label for="" class="form-labels">Contact</label>
                    <input type="text" name="quest_t" value="<?php echo $quest_title  ?>" id="quest_t">
                </div>
                <div class="c_detail">
                    <label for="" class="form-labels">City</label>
                    <input type="text" name="" id="">
                </div>
            </div>
            <div class="row">
                <div class="c_detail">
                    <label for="" class="form-labels">Name</label>
                    <input type="text" name="" id="">
                </div>

                <div class="c_detail">
                    <label for="" class="form-labels">Contact</label>
                    <input type="text" name="" id="">
                </div>
                <div class="c_detail">
                    <label for="" class="form-labels">City</label>
                    <input type="text" name="" id="">
                </div>
            </div>
            <div class="row">
                <button class="btn-primary submit-btn" type="submit" name="submit">Submit</button>
            </div>
        </form>
    </div>
</div>