Remove render view in Laravel - ajax

Question

I am working with Laravel and viewing some data in Bootstrap modal using Rander view.
I am opening the modal on click and getting render data in it.
Here is how I am randoing data in my controller:
$view = \View::make('list.modal-body', ['list'=>$list]);
$message = $view->render();
return response()->json([
ajax_request_return_data' => $message
]);
I am getting this $message which is an HTML response to my Ajax request.
and then I am rendering this on a modal body.
Here is my HTML data which I am randoring:
<div class="table-responsive">
<table>
<thead>
<tr>
</tr>
</thead>
<tbody>
#foreach($list as $single_detail)
<tr>
<td>{{ $single_detail->detail_name }}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
and here Is the AJAX function which I am Using:
$.ajax({
type : 'POST',
url : URL-OF-AJAX',
data : { 'related_data' : ralate_data_detail },
success: function(data) {
$('.CLASS_OF_Modal_Body').append(data.ajax_request_return_data)
$('#modal_id').modal('toggle');
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
}
});
ISSUE
The issue is when I render data the old render data showing in the table with new data and it keeps adding on every time I open that modal
What possible solution I have tried?
I have tried to pass the empty data before adding a new one but still shows old data in the modal table.
I have also tried to remove the view cache but still old data came in a table with new data.
Pelase help me on this how can I Randor FRESH data in the table every time and remove the old render data.

Answer 1

Instead of using append use html method.
Replace
$('.CLASS_OF_Modal_Body').append(data.ajax_request_return_data)
to
$('.CLASS_OF_Modal_Body').html(data.ajax_request_return_data)
Ref:
https://api.jquery.com/html/
https://api.jquery.com/append/