Как обновить и отобразить текущий запрос вывода в ajax?

Question

Я хочу сделать фильтрацию с помощью вызова ajax для получения данных.Фильтрация работает нормально, однако я обнаружил ошибку.Когда вы первый раз нажимаете кнопку поиска 'cari', отображается результат.Например, Али, Джон, Рэй.Для второго поиска, он отображает второй результат, например, Том, Алиса, Рой.Это указано в массиве.Но последние данные в первом списке отображения Рэй также прикреплены во втором отображаемом результате. Итак, во втором списке отображаются Том, Алиса, Рой и Рэй.Хотя массив в консоли только Том, Алиса, Рой.

Это код вызова ajax:

  <script type="text/javascript">
      $( "#cari" ).click(function() {
        // alert($('#section').val());
        var seksyen = $("#section").val();
        var status_pro= $("#statuspro").val();
        var bangsa_id= $("#bangsa").val();
        var agama_id= $("#agama").val();
        var jantina_id= $("#jantina").val();
        var negeri_id= $("#negeri").val();
        var kahwin_id= $("#status_kahwin").val();
         $.ajax({
            url: '{{ url('kakitangan') }}?'+ $.param({'section': seksyen,'statuspro': status_pro,'bangsa': bangsa_id,'agama': agama_id,'jantina': jantina_id,'negeri': negeri_id,'status_kahwin': kahwin_id}),
            dataType: 'json',
            success: function (data) {
                console.log(data);
                $('#datatable tr').not(':first').not(':last').remove();
                var html = '';
                for(var i = 0; i < data.length; i++){
                    html += '<tr>'+
                                '<td>' + data[i].name + '</td>' +
                            '</tr>';
                    }   
                $('#datatable tr').first().after(html);
            },
            error: function (data) {
            }
        });
      });
  </script>

HTML-код здесь:

     <!-- Carian mengikut seksyen -->
          <div class="form-group">
            <div class="row">
              <div class="col-lg-2"> 
                {{ Form::label('Seksyen', 'Seksyen') }}
              </div>
              <div class="col-lg-2"> 
                {{ Form::select('section', $sections, '', ['id' => 'section','class' => 'form-control select2', 'placeholder' => '--pilih--']) }}
              </div>
            </div>
          </div>
        <!-- Carian mengikut status -->
          <div class="form-group">
              <div class="row">
                <div class="col-lg-2"> 
                  {{ Form::label('Status', 'Status Kakitangan') }}
                </div>
                <div class="col-lg-2"> 
                  {{ Form::select('statuspro', $statuspro, '', ['id' => 'statuspro', 'class' => 'form-control select2', 'placeholder' => '--pilih--']) }}
                </div>
              </div>
          </div>
        <!-- Carian mengikut kategori dan pangkat -->
          <div class="form-group">
            <div class="row">
                <div class="col-lg-2">
                  <label for="kategori">Kategori:</label>
                </div>
                <div class="col-lg-3"> 
                  <select name="kategori" class="form-control select2" style="width:250px">
                      <option value="">-- pilih --</option>
                      @foreach ($categories as $key => $value)
                      <option value="{{ $key }}">{{ $value }}</option>
                      @endforeach
                  </select>
                </div>
            </div>
          </div>

          <div class="form-group">
              <div class="row">
                <div class="col-lg-2">
                  <label for="pang">Pangkat:</label>
                </div>
                <div class="col-lg-6"> 
                  <select name="pangkat" class="form-control select2"style="width:500px">
                  <option>-- pilih --</option>
                  </select>
                </div>
              </div>
          </div>
          <!-- Carian mengikut bangsa -->
          <div class="form-group">
              <div class="row">
                <div class="col-lg-2"> 
                  {{ Form::label('Bangsa', 'Bangsa') }}
                </div>
                <div class="col-lg-2"> 
                  {{ Form::select('bangsa', $bangsa, '', ['id' => 'bangsa', 'class' => 'form-control select2', 'placeholder' => '--pilih--']) }}
                </div>
              </div>
          </div>
          <!-- Carian mengikut agama -->
          <div class="form-group">
              <div class="row">
                <div class="col-lg-2"> 
                  {{ Form::label('Agama', 'Agama') }}
                </div>
                <div class="col-lg-2"> 
                  {{ Form::select('agama', $agama, '', ['id' => 'agama', 'class' => 'form-control select2', 'placeholder' => '--pilih--']) }}
                </div>
              </div>
          </div>
          <!-- Carian mengikut jantina -->
          <div class="form-group">
              <div class="row">
                <div class="col-lg-2"> 
                  {{ Form::label('Jantina', 'Jantina') }}
                </div>
                <div class="col-lg-2"> 
                  {{ Form::select('jantina', $jantina, '', ['id' => 'jantina', 'class' => 'form-control select2', 'placeholder' => '--pilih--']) }}
                </div>
              </div>
          </div>
          <!-- Carian mengikut negeri lahir -->
          <div class="form-group">
              <div class="row">
                <div class="col-lg-2"> 
                  {{ Form::label('negeri_lahir_peg', 'Negeri Lahir Pegawai') 
   }} 
                </div>
                <div class="col-lg-2"> 

               {{ Form::select('negeri_lahir', $negeri, '', ['id' => 'negeri_lahir', 'class' => 'form-control select2', 'placeholder' => '--pilih--']) }}
                </div>
              </div>
          </div>
          <!-- Carian mengikut status perkahwinan -->
          <div class="form-group">
              <div class="row">
                <div class="col-lg-2"> 
                  {{ Form::label('Status_kahwin', 'Status Perkahwinan') }}
                </div>
                <div class="col-lg-2"> 
                  {{ Form::select('status_kahwin', $kahwin, '', ['id' => 'status_kahwin', 'class' => 'form-control select2', 'placeholder' => '--pilih--']) }}
                </div>
              </div>
          </div>

код данных:

 <div class="container table-responsive col-lg-12">
                                    <!-- <div class="container text-center"> -->      
                                        <table class="table table-striped table-bordered" id="datatable" >

                                            <tr>
                                                <th>Nama</th>
                                            </tr>
                                        </table>
                                    <!-- </div> -->

                                </div>

Почему последние данные все еще привязаны к следующему поиску?Хотя поиск продолжается 4 или 5 раз, последние данные все еще прикреплены к нему.В этом примере Рой.