Laravel i get whole content of a view inside of tbody after the result of each search query

i have an issue in a view that whenever i try do a search query the like a get a child view inside the that view with result guess like the whole page appear inside tbody with the result of the search. Controller :

public function index(Request $request)
    {
        $query = Immeuble::with('plaques.user');

        // Get the search query and selected filters from the request
        $searchQuery = $request->input('q', '');
        $searchColumns = $request->input('columns', []);

        // Apply the search query and filters to the query
        if (!empty($searchQuery)) {
            $query->where(function ($q) use ($searchQuery, $searchColumns) {
                foreach ($searchColumns as $column) {
                    switch ($column) {
                        case 'im':
                            $q->orWhere('im', 'like', "%{$searchQuery}%");
                            break;
                        case 'c_rsdnce':
                            $q->orWhere('c_rsdnce', 'like', "%{$searchQuery}%");
                            break;
                        case 'property_name':
                            $q->orWhere('property_name', 'like', "%{$searchQuery}%");
                            break;
                        case 'qualif':
                            $q->orWhere('qualif', 'like', "%{$searchQuery}%");
                            break;
                        case 'name':
                            $q->orWhereHas('user', function ($q) use ($searchQuery) {
                                $q->where('name', 'like', "%{$searchQuery}%");
                            });
                            break;
                        case 'nom':
                            $q->orWhereHas('plaques', function ($q) use ($searchQuery) {
                                $q->where('nom', 'like', "%{$searchQuery}%");
                            });
                            break;
                    }
                }
            });
        }
        // Get the selected category filters from the request
        $status = $request->input('status');

        // Apply the category filters to the query
        if(!empty($status)) {
            $query->where('status', $status);
        }

        // Paginate the results
        $immeubles = $query->paginate(15)->withQueryString();


        // Pass the data to the view
        return view('admin.immeubles.index', [
            'immeubles' => $immeubles,
            'status' => $status,
            'selectedColumns' => $searchColumns,
            'searchQuery' => $searchQuery,
        ]);
    }

this is the index view i get inside of the tbody the as a result the content of the view with result of the query like it keep duplicating each time i make a search:

@extends('layouts.app')

@section('content')
@if(session('import'))
    <h6 class="alert alert-success">
        
    </h6>
@endif
<span class="align-right">
    <a href= "/admin/immeubles/create" class="btn btn-add" role="button">Ajouter un Immeuble</a><br>
</span>
<div class="container">
    <div class="card-body">
<form action="" method="post" enctype="multipart/form-data">
@csrf
    <input type="file" name="excelimport" class="control-form">
    <button class="btn">Importer</button>
</form>
<!-- The search form -->
<form id="search-form" method="GET" action="">
    <div class="form-group">
      <input type="text" name="q" class="form-control" placeholder="Search..." value="">
    </div>
    <div class="form-group">
      <label>Search in:</label>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="columns[]" value="im" id="im" >
        <label class="form-check-label" for="im">Ref Immeuble</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="columns[]" value="name" id="user_name" >
        <label class="form-check-label" for="user_name">Technicien</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="columns[]" value="c_rsdnce" id="c_rsdnce" >
        <label class="form-check-label" for="c_rsdnce">Résidence</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="columns[]" value="qualif" id="qualif" >
        <label class="form-check-label" for="qualif">Qualif</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="columns[]" value="property_name" id="property_name" >
        <label class="form-check-label" for="property_name">Proprieter</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="columns[]" value="plaque_name" id="plaque_name" >
        <label class="form-check-label" for="plaque_name">Plaque</label>
      </div>
      <div class="form-group">
        <label>Filtré par Status:</label>
        <select class="form-control" id="status" name="status">
            <option value="">--Select Status--</option>
            <option value="terminer" >Terminer</option>
            <option value="encours" >En Cours</option>
          </select>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Search</button>
  </form>
  
  <!-- The search results table -->
  <table class="table">
    <thead>
      <tr>
        <th>Ref Immeuble</th>
        <th>Residence</th>
        <th>Propriéter</th>
        <th>Qualif</th>
        <th>Plaque</th>
        <th>Technicien</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody id="search-results">
        @foreach ($immeubles as $immeuble)
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    @endforeach
    </tbody>
  </table>
  
  <!-- The pagination links -->
  
  
  <!-- The AJAX script -->
  @push('filter')
  <script>
    $(document).ready(function() {
      // Submit the search form via AJAX
      $('#search-form').submit(function(event) {
        event.preventDefault();
  
        var formData = $(this).serialize();
  
        $.ajax({
          url: $(this).attr('action'),
          type: 'GET',
          data: formData,
          beforeSend: function() {
            $('#search-results').html('<tr><td colspan="4" class="text-center">Chargement en cours...</td></tr>');
          },
          success: function(response) {
            $('#search-results').html(response);
          },
          error: function(xhr) {
            console.log(xhr.responseText);
          }
        });
      });
    });
  </script>
  @endpush
@endsection

i want to just get the result without having that issue.

via Chebli Mohamed