ajax is loading data twice from database using laravel php - php

Question

hi i am trying to load data from database using ajax . but the data is loading twice on the html page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('button').click(function(){
$.ajax({
url:"{{route('zaeemajax')}}",
method:"get",
datatype:"json",
success:function(response){
console.log(response);
var tabledata="";
$.each(response,function(key,value){
tabledata +="<tr>";
tabledata +="<td>"+value.name+"</td>";
tabledata +="<td>"+value.price+"</td>";
tabledata +="<td>"+value.category+"</td>";
tabledata +="</tr>";
});
$('#show tbody').append(tabledata);
}
});
});
</script>
in my controller i am return product data as json
public function showallpro()
{
$product=Product::all();
return response()->json($product);
}
there are only two fields right now in the products table but wheneever i try to fetch data from database it is showing the same data twice
here is the html code where i am trying to show the fecthed data from the data base
<table id="show" style="border: 1px solid black;">
<tr>
<th>name</th>
<th>Price</th>
<th>Category</th>
</tr>
<tbody>
</tbody>
</table>
<button type="">Show Data</button>

Answer 1

the only problem i was having that data was loading twice so i made the following changes and it worked
i changed this
$('#show').append(tabledata);
instead of
$('#show tbody').append(tabledata);