ajax дважды загружает данные из базы данных с помощью laravel php

привет, я пытаюсь загрузить данные из базы данных с помощью ajax. но данные загружаются дважды на страницу html.

<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>

в моем контроллере я возвращаю данные о продукте как json

public function showallpro()
    {
        $product=Product::all();
        return response()->json($product);

    }

в таблице продуктов сейчас есть только два поля, но всякий раз, когда я пытаюсь получить данные из базы данных, они показывают одни и те же данные дважды

вот html-код, в котором я пытаюсь показать данные из базы данных

<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>