Удалить модальный список желаемого продукта Laravel 7 Ajax

Question

У меня есть небольшое модальное окно, которое отображается на странице, и статьи, которые находятся в списке желаний, отображаются вертикально, когда дело доходит до показа продуктов, на изображении есть класс для удаления продукта из списка, I хочу сделать это с помощью Ajax, но он не вызывает никаких ошибок и не выполняет запрос.

@forelse ($wishlists as $wishlist)
   <form action="{{ url('wishlist/'. $wishlist->id) }}" method="POST" id="delete-{{ $wishlist->id }}">
   @method('DELETE')
   @csrf

   <button type="submit" name="delete" class="btn-delete-wishlist">
   <input type="image" src="{{ $wishlist->product->featured_image_url }}" alt="{{ $wishlist->product->name }}" class="rounded">
   </button>
   </form>
@empty
@endforelse

, а в jquery у меня есть следующее:

<script>
$(document).ready(function(){

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    var wishlistIds = @json($wishlists);

    $.each(wishlistIds, function(index, value){

        $('.btn-delete-wishlist').click(function(){
            $.ajax({
                type: 'POST',
                url: "wishlist/" + value.id,
                data: {
                    _token: '{{csrf_token()}}'
                }
                beforeSend: function(){
                    $('.btn-delete-wishlist').text('Eliminando...');
                },
                success: function(data){
                    setTimeout(function(){
                        swal("Producto eliminado de tu lista de deseos", "success");
                    }, 2000);
                }
            });
        });
    });

});

Маршрут

Route::delete('wishlist/{WishList}', 'WishlistController@destroy');

Контроллер

public function destroy(WishList $WishList)
{
    $wishlist->delete();
    // alert()->success('Producto eliminado de tu lista de deseos.');
}