my blade view

I was working on updating the follow button in real-time so I noticed if I clicked on unfollow automatically it update to follow, but when i click on follow it's does nothing until I refresh the page manually

<button data-id="{{ $user->id }}" class="w-1/2 px-3 py-2 text-base text-white border rounded-lg action-follow bg-blue-lite hover:bg-blue"> <strong>
    @if (auth()->user()->isFollowing($user))
        UnFollow
    @else
        Follow
    @endif
    </strong>
</button>

$(document).ready(function() {

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

    $('.action-follow').click(function(){
        var user_id = $(this).data('id');
        var cObj = $(this);
        var c = $(this).parent("div").find(".tl-follower").text();

        $.ajax({
           type:'POST',
           url:'/profile/follow',
           data:{user_id:user_id},
           success:function(data){
              console.log(data.success);
              if(jQuery.isEmptyObject(data.data)){
                cObj.find("strong").text("Follow");
                cObj.parent("div").find(".tl-follower").text(parseInt(c)-1);
              }else{
                cObj.find("strong").text("UnFollow");
                cObj.parent("div").find(".tl-follower").text(parseInt(c)+1);
              }
           }
        });
    });

});

My Controller

public function follwUserRequest(Request $request){

        $user = User::find($request->user_id);
        $response = auth()->user()->toggleFollow($user);

        return response()->json(['success'=>$response]);
    }