foreach response ajax create multi row table

I am trying to handle an ajax response where I have different results.
What I am doing is make an ajax call to my controller where I send an id; I make filters via model laravel and it returns all matching results via json.

This is my blade:

<div class="container-xxl show-order" hidden>
    <div class="row justify-content-center">
        <div class="col text-center">
            <table class="table table-bordered mt-5">
                <thead>
                  <tr>
                    <th scope="col">ID</th>
                    <th scope="col">quantita bottiglie</th>
                    <th scope="col">prezzo</th>
                    <th scope="col">Data ordine</th>
                    <th scope="col">Pagato</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row"><input class="idorder text-center" readonly value="" type="text" style="border:none;font-weight:900;"></th>
                    <td><input class="qty input-transition text-center" readonly value="" type="text" style="border:none;font-weight:900;"></td>
                    <td><input class="prezzo text-center" readonly value="" type="text" style="border:none;font-weight:900;"></td>
                    <td><input class="data_ordine text-center" value="" readonly type="text" style="border:none;font-weight:900;"></td>
                    <td><input class="pagato text-center" value="" readonly type="text" style="border:none;font-weight:900;"></td>
                  </tr>
                </tbody>
              </table>
        </div>
    </div>
</div>

this is my ajax:

$('.vieworder').change(function (e) { 
    e.preventDefault();
    if ($(this).is(':checked')) {
    let restaurant_id=$('.restaurant').val();
        
        $('.show-order').attr('hidden',false);

        $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
    $.ajax({
        method: "POST",
        url: "/filterorder",
        data: {
                'restaurant_id':restaurant_id,
              },
        success: function (response) {
            let res = JSON.stringify(response);
                let respons = JSON.parse(res);
                
                $.each(respons,function(key,value){
                    
                        console.log(value[1]);
                        let idorder=$('.idorder').val(value['id']);
                        let qty=$('.qty').val(value['quantita']);
                        let prezzo=$('.prezzo').val(value['prezzo']);
                        let data_ordine=$('.data_ordine').val(value['data_ordine']);
                        if (value['pagato']==0) {
                        let pagato=$('.pagato').val('NO');
                        } else {
                            let pagato=$('.pagato').val('SI');
                        }
                  
                });        
        }
    });
    }else{
        $('.show-order').attr('hidden',true);

    }
    
});

and this is my controller:

public function order(){
    $orderselected=Order::where('id_restaurant',$_POST['restaurant_id'])->get();
    return response()->json(['id'=>$orderselected]);
}

what I want is to create a new row for each result at the moment only the last result is transcribed.
I know I need to use a foreach, but I'm not sure how to write it.