table display having a column of checkboxes gets hidden when using datatable

Help needed! I have done coding using php mvc technique, using wamp server and tried using datatables(only for search functionality). I have a table display in my Admin index page which fetches data from mysql database. I also have checkbox included at each row so that it can be selected and deleted.

...

<form action="<?php echo URLROOT; ?>/posts" method="post">
    <button type="submit" value="Delete" name="delete_multiple_data">Delete Multiple Items</button>
        <table id="mtab" class="display table table-striped table-bordered dt-responsive nowrap" style="width:100%">
          <thead class="thead-dark">
          <tr class="danger">
                       <tr class="danger">
                       <th scope="col">ID</th>
                        <th scope="col">Pack Name</th>
                        <th scope="col">Select</th>
             </tr>
           </thead>
         
<tbody> 

<?php foreach($data['posts'] as $post) : ?>  
      <tr>
       <td><?php echo $post->id; ?></td>
      <td><?php echo $post->pckname; ?></td>
          <td><input type="checkbox" name="delete[]" value="<?php echo $post->id; ?>"></td>
      </tr>
           
  <?php endforeach; ?>
  </tbody>
        </table>
        </form>
...

my controller,

...
  if(isset($_POST['delete_multiple_data'])){
            
      if(isset($_POST['delete'])){
       
        
    foreach($_POST['delete'] as $deleteid){

       $deletepack = $this->postModel->deletePost($deleteid);
    }
  }
 
}
      $this->view('posts/index', $data);
...

without table id="mtab"(removing table id="mtab") everything is working fine.

but for search to be enabled in my table id="mtab" i used the below script,

...

<script type="text/javascript">
$(document).ready(function(){
    $("#mtab").DataTable({
        
    });
});
</script>
...

if i use this script, it hides my checkboxes totally from display, please help