How to refresh and display current output request in ajax?

I want to do filtering using ajax call to get data. The filtering works fine, however, I detect a bug. When the first time click the search button 'cari', it displays the result. For example Ali, John, Ray. For second time search, it displays the second result for example Tom, Alice, Roy. It listed in the array. But, the last data in first display list, Ray also attached in the second result displayed.So, the second list display Tom, Alice, Roy and Ray. Although the array in console only Tom, Alice, Roy.

This is the ajax call code:

  <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: '?'+ $.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>

Why the last data still attached to the next search? Although the searching continues for 4th or 5th times, the last data still attached to it. In this example, Roy.

via Chebli Mohamed