Building an AJAX button on follow laravel - ajax

Question

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]);
}

Answer 1

Try this one:
$user = User::find($request->user_id);
$response = auth()->user()->toggleFollow($user);
$status = auth()->user()->isFollowing($user);
return response()->json([ 'success' => $response, 'is_following' => $status ]);
<button data-id="{{ $user->id }}" id="mybutton{{ $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>
$.ajax({
type:'POST',
url:'/profile/follow',
data:{user_id:user_id},
success:function(data){
console.log(data);
if(data.is_following == true){
cObj.find("strong").text("UnFollow");
cObj.parent("div").find(".tl-follower").text(parseInt(c)+1);
}else{
cObj.find("strong").text("Follow");
cObj.parent("div").find(".tl-follower").text(parseInt(c)-1);
}
}
});