Laravel8/Jquery importing data from database and generating table working in html but not on laravel page

Question

I want to get all data from $colete and generate table rows in my invoice. The weird thing is that when I write it only with html and js it works but when I try to adapt it it doesn't anymore.

This is my controller function: public function

getColetebyid(Request $request){

     $coleteid = $request->coleteid;

     $colete = Colete::select('*')->where('id', $coleteid)->get();

     // Fetch all records
     $response['data'] = $colete;

     return response()->json($response);
  }

This is my script:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script type='text/javascript'>
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
$(document).ready(function(){

   // Fetch all records
   $('#but_fetchall').click(function(){

      // AJAX GET request
      $.ajax({
        url: 'getColete',
        type: 'get',
        dataType: 'json',
        success: function(response){

           createRows(response);

        }
      });
   });

   // Search by userid
   $('#but_search').click(function(){
      var coleteid = Number($('#search').val().trim());

      if(coleteid > 0){

        // AJAX POST request
        $.ajax({
           url: 'getColetebyid',
           type: 'post',
           data: {_token: CSRF_TOKEN, coleteid: coleteid},
           dataType: 'json',
           success: function(response){

              createRows(response);

           }
        });
      }

   });

});

// Create table rows
function createRows(response){
   var len = 0;
   $('#empTable tbody').empty(); // Empty <tbody>
   if(response['data'] != null){
      len = response['data'].length;
   }

   if(len > 0){
     for(var i=0; i<len; i++){
        var id = response['data'][i].id;
        var nume = response['data'][i].nume;
        var masina = response['data'][i].masina;
        var numarcursa = response['data'][i].numarcursa;

        var tr_str = "<tr>" +
          "<td align='center'>" + (i+1) + "</td>" +
          "<td align='center'>" + nume + "</td>" +
          "<td align='center'>" + masina + "</td>" +
          "<td align='center'>" + numarcursa + "</td>" +
        "</tr>";

        $("#empTable tbody").append(tr_str);
     }
   }else{
      var tr_str = "<tr>" +
        "<td align='center' colspan='4'>No record found.</td>" +
      "</tr>";

      $("#empTable tbody").append(tr_str);
   }
} 
</script>

And also the table I want to insert the inputs in:

<table class="table table-striped table-borderless border-0 border-b-2 brc-default-l1" id='empTable'>
                    <thead class="bg-none bgc-default-tp1">
                        <tr class="text-white">
                            <th class="opacity-2">#</th>
                            <th>Nume Produs</th>
                            <th>Numar Masina</th>
                            <th>Numar Cursa</th>
                            <th>Vrid</th>
                            <th>Cantitate</th>
                            <th>Pret</th>
                            <th>TVA-produs</th>
                            <th width="140">Total</th>
                        </tr>
                    </thead>

                    <tbody class="text-95 text-secondary-d3" >
                        <tr></tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td class="text-95"></td>
                            <td class="text-secondary-d2"></td>
                        </tr> 
                    </tbody>
                </table>

And the toggle buttons from my modal:

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Adaugare Colet</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
         <label for="">Introduceti ID</label>
         <input type='text' id='search' name='search' placeholder='Enter userid 1-7'>
      </div>
      <div class="modal-footer">
      <input type='button' value='Search' id='but_search'>
      <input type='button' value='Fetch all records' id='but_fetchall'>

      </div>
    </div>
  </div>
</div>

***And also this is the page format from where it fetches the data

<!-- Meta -->
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta charset="utf-8">
   <meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
   <input type='text' id='search' name='search' placeholder='Enter userid 1-7'>
   <input type='button' value='Search' id='but_search'>
   <br/>
   <input type='button' value='Fetch all records' id='but_fetchall'>

   <!-- Table -->
   <table border='1' id='empTable' style='border-collapse: collapse;'>
     <thead>
       <tr>
         <th>S.no</th>
         <th>Nume</th>
         <th>Masina</th>
         <th>Numar</th>
       </tr>
     </thead>
     <tbody></tbody>
   </table>

   <!-- Script -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

   <script type='text/javascript'>
   var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
   $(document).ready(function(){

      // Fetch all records
      $('#but_fetchall').click(function(){

         // AJAX GET request
         $.ajax({
           url: 'getColete',
           type: 'get',
           dataType: 'json',
           success: function(response){

              createRows(response);

           }
         });
      });

      // Search by userid
      $('#but_search').click(function(){
         var coleteid = Number($('#search').val().trim());

         if(coleteid > 0){

           // AJAX POST request
           $.ajax({
              url: 'getColetebyid',
              type: 'post',
              data: {_token: CSRF_TOKEN, coleteid: coleteid},
              dataType: 'json',
              success: function(response){

                 createRows(response);

              }
           });
         }

      });

   });

   // Create table rows
   function createRows(response){
      var len = 0;
      $('#empTable tbody').empty(); // Empty <tbody>
      if(response['data'] != null){
         len = response['data'].length;
      }

      if(len > 0){
        for(var i=0; i<len; i++){
           var id = response['data'][i].id;
           var nume = response['data'][i].nume;
           var masina = response['data'][i].masina;
           var numarcursa = response['data'][i].numarcursa;

           var tr_str = "<tr>" +
             "<td align='center'>" + (i+1) + "</td>" +
             "<td align='center'>" + nume + "</td>" +
             "<td align='center'>" + masina + "</td>" +
             "<td align='center'>" + numarcursa + "</td>" +
           "</tr>";

           $("#empTable tbody").append(tr_str);
        }
      }else{
         var tr_str = "<tr>" +
           "<td align='center' colspan='4'>No record found.</td>" +
         "</tr>";

         $("#empTable tbody").append(tr_str);
      }
   } 
   </script>
</body>
</html>

I really have no idea what I'm supposed to do to make it work for my situation. The id's are fine and the controller and script 100% works because it did for my draft page