Sort and Save table data using jquery sortable

Hi I am trying to set up a table with parent and child data which can be sorted by using the jquery sortable library, I am able to get the position and the respective ids of the data but unable to send the to the controller using jquery

HTML Part:

<tbody class="sort">
                      @foreach($menus as $menu)
                        <tr id = "{{ $menu->id }}" class="parent">
                            <td>{{$menu->name}}</td>
                            <td>{{ $menu->link }}</td>
                            @if($menu->sub == 1)
                            <td>Active</td>
                            @else
                            <td>In-Active</td>
                            @endif
                            <td class="text-right" >
                                <a href="{{ route("menu.edit", $menu->id) }}" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"><i class="fe-edit-2" ></i></a>
                                    <button data-toggle="tooltip" data-placement="top" data-id="{{$menu->id}}" title="" data-original-title="Delete" class="delete btn btn-danger ml-1 "  type="submit"><i class="fas fa-trash-alt"></i></button>        
                            </td>
                            @if(count(App\Menu::where('parent_id',$menu->id)->orderBy('position','asc')->get())>0)
                                @foreach(App\Menu::where('parent_id',$menu->id)->orderBy('position','asc')->get() as $child)
                                    <tr id="{{ $child->id }}">
                                        <td>~{{$child->name}}</td>
                                        <td>{{ $child->link }}</td>
                                        <td></td>
                                        <td class="text-right" >
                                            <a href="{{ route("menu.edit", $child->id) }}" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"><i class="fe-edit-2" ></i></a>
                                                <button data-toggle="tooltip" data-placement="top" data-id="{{$child->id}}" title="" data-original-title="Delete" class="delete btn btn-danger ml-1 "  type="submit"><i class="fas fa-trash-alt"></i></button>        
                                        </td>
                                    </tr>
                                @endforeach
                            @endif
                        </tr>
                      @endforeach
                    </tbody>

Jquery part:

$(document).ready(function(){
        $('.sort').sortable({
            stop:function(event, ui){
                var parameter = new Array();
                var position = new Array();
                $('.sort>tr').each(function(){
                    parameter.push($(this).attr("id"));
                });
                $(this).children().each(function(index) {
                    position.push(index + 1);
                });
            
                $.ajax({
                    url:"{{ route('menu.savePosition') }}",
                    method:"POST",
                    data:{"id":parameter,"position":position},
                    success:function(response){
                        console.log(response);
                    },
                    error:function(xhr,response){
                        console.log(xhr.status);
                    }
                });
            },

        }).disableSelection();
});

Controller Part:

public function SavePosition(Request $req){
        $position = ($req->all());
        return $req->all();
        // foreach($file as $pos){
        //     $id = $pos[1];
        //     $position = $pos[0];
        //     $menu = Menu::findOrFail($id);
        //     $menu->position = $position;
        //     $menu->save();
        // }

    }

After all this the console looks like the following :

please help me out fixing the issue

any help would be highly appreciated

Thanks in advance