Ajax Customer Search & Select Input

Evening All

I'm currently building a part of the app where a user creates a job. A job belongs to a customer so I have the customer_id on the jobs table. I've got the search function sorted..ish. It populates the results just not the way i would like them.

I'm trying to put the search box inside of the modal and it populate a select dropdown (inside the modal) with the customers name accordingly so that i can take that and submit accordingly. I chose <select as i can have the ID as the value and the name displayed.

Currently the results are being populated on the main page not in the modal.

Please could someone advise where i might be going wrong? Or suggest a better way of going about this?

//Controller 

if($request->ajax())
        {
            $output = '';
            $query = $request->get('query');
            if($query != '')
            {
                $data = \App\Customer::where('name_first', 'like', '%'.$query.'%')
                ->get();
            }
            else
            {
                $data = \App\Customer::orderBy('name_first', 'asc')
                ->get();
            }
            $total_row = $data->count();
            if($total_row > 0)
            {
                foreach($data as $row)
                {
                    $output .= '
                    
                    <select required type="text" name="status" class="form-control">
                        <option value="'.$row->id.'">'.$row->name_first . ' ' . $row->name_last .'</option>
                    </select>

                    ';
                }
            }
            else
            {
                $output = '
                <tr>
                    <td align="center" colspan="5">No Data Found</td>
                </tr>
                ';
            }
            $data = array(
            'table_data'  => $output,
            'total_data'  => $total_row
            );

            echo json_encode($data);
        }

//Modal View 

<input type="text" name="search" id="search" class="form-control" placeholder="Search Customers" />

<div class="col-md-12">
    <label>Customer</label>
    <select required type="text" name="status" class="form-control">
    	<option hidden>Select</option>
    	<option value="1">Active</option>
    	<option value="0">Inactive</option>
    </select>
 </div>

<script>
$(document).ready(function(){

 fetch_customer_data();

 function fetch_customer_data(query = '')
 {
  $.ajax({
   url:"{{ route('autocomplete') }}",
   method:'GET',
   data:{query:query},
   dataType:'json',
   success:function(data)
   {
    $('tbody').html(data.table_data);
    $('#total_records').text(data.total_data);
   }
  })
 }

 $(document).on('keyup', '#search', function(){
  var query = $(this).val();
  fetch_customer_data(query);
 });
});
</script>