How to show wishlist items after adding items to wishlist without page refresh using ajax in Laravel?

I try to show the item in product page that it added to wishlist without reload but I can only remove wishlsit items in product page without reload using ajax ,so I can’t show items without reload and I want to show items that after adding items to wishlist without page refresh.

Product Page Blade

      @Extends('layouts.base')

    @section('content')

         @foreach($car_lists as $car_list)
           
          <li class="item odd cars_data">

        <div class="product-image"> <a href="{{route('car.detail', ['id' => $car_list->id])}}" title="">
    
    <!-- Begin responsive list slider  -->

           <div class="w-m-280px mb-12px mt-10px">

    <div class="list-slide-container">

    <div class="list-slide-items aspect-ratio-4-3 w-100">

    <div class="slide-items">


     @php
                              
   $images = explode('|', $car_list->images);

    @endphp

 @if($car_list->images)

@for($i = 0; $i < 4; $i++)
<div class="slide-items-list ">
    <div class="slide-items-image-wrapper">

    <img class="slide-items-image " src="{{asset('images')}}/{{$images[$i]}}" alt=""></div>
    <div class="slide-items-button"><i class="fas fa-circle"></i></div>

</div>

@endfor

@else

  <div class="slide-items-list ">
    <div class="slide-items-image-wrapper  ">

    <img class="slide-items-image" src="{{asset('images/car.png')}}" alt=""></div>
    <div class="slide-items-button"><i class="fas fa-circle"></i></div>

</div>

@endif


           </div>
       </div>
      </div>
    </div>

       </a> 


       </div>

          <div class="ratings">
            <div class="rating-box">
              <div style="width:50%" class="rating"></div>
            </div>
          </div>



          <div class="desc std">

            <p>There's no text!</p>

           
          </div>

          <div class="price-box">
           <div class="price-display"  style=" margin-left:2rem; margin-top: 3rem; font-size: 20px;  font-weight: 700; ">
            <hr>

              <span class="result_two"> {{number_format($car_list->price)}}</span> 

             <hr>
        </div>
          </div>
          
          <div class="actions action-button">
                    
         **<!-- add item to wishlist -->**

        @auth

        @php 

        $countWishlist = 0;

        @endphp


        @php

        $countWishlist = AppModelsWhislist::countWishlist($car_list['id'])

        @endphp
           

         <input type="hidden" name="car_id"  class="car_id" value="{{$car_list->id}}">
         
        
        <button class="button ajx-cart addwishlist  addToWhislist"  value="{{$car_list->id}}" type="button" style="background-color: lightgrey; cursor: pointer;">

            @if($countWishlist > 0)

               <i class="fas fa-heart"></i>

            @else

               <i class="far fa-heart"></i>
         
            @endif
                
            
              </button>

            @endauth
         
            <!-- end -->

        </div>
      </li>
      @endforeach

            <ul class="pagination">
               

{!! $car_lists->links('pagination') !!}

            </ul>
      

  <aside class="col-left sidebar col-sm-3 col-xs-12 col-sm-pull-9 wow bounceInUp animated"> 
 
      **<!-- This is my wishlist in product page that I' can't show items there without page refresh -->**

       @auth

       @php
      $wishlist = AppModelsWhislist::where('user_id', auth()->user()->id)- 
  >orderBy('created_at','DESC')->paginate(3, ['*'], 'wishlist_favorites');
    
    @endphp
    
    <div class="block block-list block-cart">
      <div class="block-title">My Favorites </div>
      <div class="block-content">
        <div class="summary">

          <p class="amount"><a href="#"> <span class="wishlist-count">0</span></a> </p>

         
        </div>
        @if($wishlist->count() > 0)
        <p class="block-subtitle">new favorites</p>
        @else
          <p class="block-subtitle"><img src="{{asset('assets/images/favourite.png')}}" width="30px"> No favorites! </p>
        @endif
        <ul id="cart-sidebar" class="mini-products-list">
          @if($wishlist->count() > 0)
          @foreach($wishlist as $item) 
          <li class="item wishlist_data">
            <div class="item-inner"> <a href="{{route('car.detail', ['id' => $item->cars->id])}}" class="product-image">

                @php
                              
             $wish_images = explode('|', $item->cars->images);

              @endphp

              @if($item->cars->images)
              @for($i = 0; $i < 1; $i++)
              <img src="{{asset('asset/images')}}/{{$wish_images[$i]}}" width="80" 
           alt="product">
              @endfor
              @else
                <img src="{{asset('assets/images/sports-car.png')}}" width="80" alt="product">
              @endif

            </a>
              <div class="product-details">
                 <input type="hidden" class="car_id" value="{{$item->cars->id}}">
                <div class="access"> <a href="#" class="btn-remove1 remove-whislist-item">Remove</a> 
                <a href="#" title="Edit item" class="btn-edit">
                <i class="icon-pencil"></i><span class="hidden">Edit item</span></a> </div>
                <!--access--> 
                
               <div style="margin-left: 10px;">
                <p class="product-name"><a href="{{route('car.detail', ['id' => $item->cars->id])}}"> 
               <span class="block-span-price">{{$item->cars->manufacturer}} {{$item->cars->model}} </span> 
                 </a></p>
                <hr>

                  <span class="price"><span class="block-span-price"> 
                  {{number_format($item->cars->price)}} 

                  </span>
                  </div>
              </div>
              <!--product-details-bottoms--> 
            </div>
          </li>

         @endforeach

            {{$wishlist->links('pagination2')}}
          @endif

         
        </ul>
      </div>
    </div>
    @endauth 

   <!-- end -->


  </aside>

@endsection

This is my ajax code below that I want to show items using ajax but how should I do? I tried many times to fix it but I couldn’t.

Ajax code

       $(document).ready(function () {

loadwishlist();

$('.addToWhislist').click(function (e){
    e.preventDefault();

    $.ajaxSetup({

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

    });

    var Click = $(this);
    var car_id = $(Click).closest('.cars_data').find('.car_id').val();

     var cars_id = $(Click).closest('.wishlist_data').find('.car_id').val();

    $.ajax({

        type: "POST",
        url: '/add-to-whislist',
        data: {
            'car_id': car_id,
            'cars_id': cars_id,
            
        },

        success: function(response){

            if (response.action == 'add') {


                $(Click).closest('.cars_data').find('.addwishlist').html('<i class="fas fa-heart"></i>');

                loadwishlist();

            }
            else if (response.action == 'remove') {

                $(Click).closest('.cars_data').find('.addwishlist').html('<i class="far fa-heart"></i>');
                loadwishlist();
            }
        
            loadwishlist();
            
        }

    });



});



function loadwishlist()
{
    $.ajax({

        type: "GET",
        url: '/load-cart-data',
        success: function(response){
            $('.wishlist-count').html('');
            $('.wishlist-count').html(response.count);
            
            
        }

    });
}


    $('.remove-whislist-item').click(function (e){
    e.preventDefault();

    $.ajaxSetup({

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

    });
    
    var Clickedthis = $(this);
    var car_id = $(Clickedthis).closest('.wishlist_data').find('.car_id').val();

    $.ajax({

        type: "POST",
        url: '/delete-whislist-item',
        data: {
            'car_id': car_id,
        },
        success: function(response){

            $(Clickedthis).closest('.wishlist_data').remove();
            loadwishlist();
        }

    });



});




});

Wishlist Controller

  <?php

namespace AppHttpControllerscontents;

  use AppHttpControllersController;
  use IlluminateHttpRequest;
  use AppModelsWhislist;
   use IlluminateSupportFacadesAuth;
   use AppModelsCar;
    use AppModelsUser;

    class WishlistController extends Controller
    {

    public function add()
     {

    if (Auth::check()) {

        $car_id = request()->car_id;
        
       
       
        $wislist = Whislist::where('user_id',Auth::id())->get()->first();

        if (Whislist::where('user_id',Auth::id())->where('car_id', $car_id)->exists()) {
            $whish = Whislist::where('car_id', $car_id)->where('user_id',Auth::id())->first();
            $whish->delete();

              return response()->json(['action' => 'remove', 'status' => 'removed!']);
        }
     
        else{
             

           $whish = new Whislist();
        
             
             $whish->car_id = $car_id;
            $whish->user_id = Auth::id();
            $whish->save();
                 
           return response()->json(['action' => 'add','status' => 'saved']);
        
        }

    }

    
    else{
        return response()->json(['status' => "Login To Continue"]);
    }

    }

      public function deleteItem()
     {
    if (Auth::check()) {
        $cars_id = request()->input('car_id');
        if (Whislist::where('car_id',$cars_id)->where('user_id',Auth::id())->exists()) {
            $whish = Whislist::where('car_id',$cars_id)->where('user_id',Auth::id())->first();
            $whish->delete();

            return response()->json(['status' => "removed!"]);
        }
             }
    
    else{
        return response()->json(['status' => "Login To Continue"]);
    }
}





  
public function countWislist()
{
    $countwislist = Whislist::where('user_id',Auth::id())->count();
    return response()->json(['count' => $countwislist]);
}
 


}