Like button is working but not changing to Unlike in django

Question

I've been trying to debug this issue for a day together with my expert coder but we were unable to identify the issue here. The like button works perfectly all right and I am able to query the total likes, but the Clap button does not change to unlike and we are unsure why. I believe the error lies in either the html line:

{% if liked and post.slug == blog_post.slug %} Unlike {% else %} Like {% endif %}

or the django line:

context["liked"] = True if blog_post.likes.filter(id=request.user.id).exists() else False

Big thanks if you can identify the issue here!

views.py

def home_feed_view(request, *args, **kwargs):
    context = {}
    blog_posts = BlogPost.objects.all()
    context['blog_posts'] = blog_posts 
    if request.method=="POST":
        slug=request.POST["submit_slug"]
        blog_post = get_object_or_404(BlogPost, slug=slug)
        context['blog_post'] = blog_post
        context["liked"] = True if blog_post.likes.filter(id=request.user.id).exists() else False
        context['total_likes'] = blog_post.total_likes()
    type_of_post = TypeofPostFilter(request.GET, queryset=BlogPost.objects.all())
    context['type_of_post'] = type_of_post

    paginated_type_of_post = Paginator(type_of_post.qs, 13 )
    page = request.GET.get('page')
    post_page_obj = paginated_type_of_post.get_page(page)

    context['post_page_obj'] = post_page_obj

    return render(request, "HomeFeed/snippets/home.html", context)


def LikeView(request, slug):
    context = {}
    user = request.user
    if not user.is_authenticated:
        return redirect('must_authenticate')
    post = get_object_or_404(BlogPost, slug=slug)
    liked = False
    if post.likes.filter(id=request.user.id).exists():
        post.likes.remove(request.user)
        liked = False
    else:
        post.likes.add(request.user)
        liked = True
    return redirect(request.META.get('HTTP_REFERER', ''))

<td class="table-primary">
   <form action="{% url 'HomeFeed:like_post' post.slug %}" method="POST"> 
       {% csrf_token %} 
              
       <button type="submit" name="submit_slug" value="{{ post.slug }}" class='btn btn-primary btn-sm'>

       {% if liked and post.slug == blog_post.slug %} Unlike {% else %} Like 
       {% endif %}

       </button> 
       {{ post.total_likes }} Clap {{ post.total_likes|pluralize }}
         
   </form>
</td> 

urls.py

path('<slug>/like/', LikeView, name='like_post'),

models.py

class BlogPost(models.Model):
    chief_title = models.CharField(max_length=50, null=False, blank=False)
    body = models.TextField(max_length=5000, null=False, blank=False)
    likes = models.ManyToManyField(settings.AUTH_USER_MODEL, related_name='blog_posts', blank=True)
    author = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE)
    slug = models.SlugField(blank=True, unique=True)

Answer 1

Ok so here's a much simpler way to perform a check if a model exist in a m2m field in another model:

html

{% if request.user in blog_post.likes.all %} Unlike {% else %} Like {% endif %}

view

if request.user in blog_post.likes.all():

P.S. In your model you should rename the field likes to likers since its a relation with a User model not a Like model :)

EDIT

So, to easily display a list of posts and their like buttons accordingly on a single page you wanna do this in your template:

views.py

def posts(request): 
    blog_posts = BlogPost.objects.all()
    return render(request, 'index.html', {'blog_posts': blog_posts})

index.html

{% for post in blog_posts %}

    <h1>{{ post.chief_title }}</h1>
    <p>{{ post.author }} says: </p>
    <b>{{ post.body }}</b>
    <p> This post is liked by: </p>
    {% for user in post.likes %}
        <p>{{ user.username }}</p>
    {% endfor %}
    
    {% if request.user not in post.likes.all %} 
        <a href="{% url 'like_post' post.slug %}">Like</a>
    {% else %} 
        <a href="{% url 'like_post' post.slug %}">Unlike</a>
    {% endif %}

{% endfor %}