The datatable cant display the searching and sorting, may I know why?

The datatable cant display the searching and sorting, may I know why? The problem is, the searching, sorting didn’t display. But when I use HTML code 100% then it will display, but when I use data that fetch from MySQL, it didn’t display the searching and sorting but it displays the table. I’m new to this and still a student. This is where the js and css link I take
datatable

table for datatype

<!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">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Content filter for IHSR</title>

    <!--Link from datatable for sort,pagging,search-->
    <link href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
</head>

<body >
    <?php
    include('connection.php');

    // select column from table ihsr_facebook_content
    $query = "SELECT * FROM customer ORDER BY Customer_Name ASC";//later change to DESC
    // get results from database
    $result = mysqli_query($connect, $query);

    // display data in table
    if(mysqli_num_rows($result)>0)
    {
    $output = '<div>
                <table id="example" class="display" style="width:100%">
                  <thead class="table-dark">
                    <tr>
                      <th style="padding-left: 10px; padding-right: 20px;" >No.</th>
                      <th style="padding-left: 10px; padding-right: 20px;" colspan="2">Name</th>
                      <th style="padding-left: 10px; padding-right: 20px;" >Email</th>
                      <th style="padding-left: 10px; padding-right: 20px;" >Contact</th>
                      <th style="padding-left: 10px; padding-right: 20px;" >Address</th>
                      <th width="7%">Edit</th>
                      <th width="9%">Delete</th>
                    </tr>
                  </thead>
                <tbody>';
    $num = mysqli_num_rows($result);
    $count= 1 ;
    // loop through results of database query, displaying them in the table
    while($row = mysqli_fetch_array( $result )) {
      $Customer_ID = $row['Customer_Id'];
      $Customer_Name = $row['Customer_Name'];
      $Customer_Email = $row['Customer_Email'];
      $Customer_Contact = $row['Customer_Contact'];
      $Customer_Address = $row['Customer_Address'];

    // echo out the contents of each row into a table
      $output.='<tr>
                  <td>'.$count.'</td>
                  <td colspan="2">'.$Customer_Name.'</td>
                  <td>'.$Customer_Email.'</td>
                  <td>'.$Customer_Contact.'</td>
                  <td>'.$Customer_Address.'</td>
                  <td><a class="btn-1" href="product_edit.php?GetEdit='.$Customer_ID.'" id="myBtn">Edit</a></td>
                  <td><button type="button" class="delButton btn-1" data-toggle="modal" id="'.$Customer_ID.'" data-target="#myModal" >Delete</button></td>
                </tr>';
      $count++;
    }
    }
    // close table>
    echo $output.'</tbody></table></div>';
    ?>

<script>
$(document).ready(function() {
    $('#example').DataTable();
} );

</script>
</body>
</html>