Как я могу отображать и скрывать кнопки «Нравится/Не нравится» с помощью Javascript в моем веб-приложении?

Я прохожу онлайн-курс CS50W в Гарварде и создаю веб-приложение, похожее на Twitter. Когда пользователь видит сообщение, мне нужно показать пользователю кнопку «Нравится» или «Не нравится» в зависимости от того, понравилось оно пользователю или нет. Также есть счетчик, показывающий, скольким пользователям понравился пост на данный момент. Я могу обновить счетчик, если пользователю понравилась или не понравилась публикация, но у меня проблема с кодом, отображающим или скрывающим кнопки.

Вот мой код:

модели.py

class Post(models.Model):
    """ Model representing a post. """
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    content = models.TextField()
    timestamp = models.DateTimeField(auto_now_add=True)
    no_of_likes = models.IntegerField(default=0)

    def __str__(self):
        return f"Post {self.id} by {self.user.username} on {self.timestamp}"
    
class Like(models.Model):
    """ Model representing a like. """
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    post = models.ForeignKey(Post, on_delete=models.CASCADE)
    timestamp = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return f"{self.user} likes {self.post}"

urls.py

path("", views.index, name = "index"),
path("like/<int:post_id>", views.like, name = "like"),
path("unlike/<int:post_id>", views.unlike, name = "unlike"),

view.py

def index(request):
    """ Home page. """
    posts = Post.objects.all().order_by('-timestamp')
    paginator = Paginator(posts, 5)
    page_number = request.GET.get('page')
    page_obj = paginator.get_page(page_number)
    likes = Like.objects.all()  
    
    # Make a list of liked posts.
    liked_posts = []
    try:
        for like in likes:
            if like.user.id == request.user.id:
                liked_posts.append(like.post.id)
    except:
        liked_posts = []

    return render(request, "network/index.html", {
        "posts": posts,
        "page_obj": page_obj,
        "likes": likes,
        "liked_posts": liked_posts,             
    })

@login_required
def like(request, post_id):
   
    post = Post.objects.get(pk=post_id)
    user = User.objects.get(pk=request.user.id)
    like = Like.objects.create(user=user, post=post)
    like.save()

    # Update no of likes.
    post.no_of_likes = Like.objects.filter(post=post).count()
    post.save()
    return JsonResponse({"message": "successfully liked", "no_of_likes": post.no_of_likes})

@login_required   
def unlike(request, post_id):
    
    post = Post.objects.get(pk=post_id)
    user = User.objects.get(pk=request.user.id)
    like = Like.objects.filter(user=user, post=post)
    like.delete()

    # Update no of likes.
    post.no_of_likes = Like.objects.filter(post=post).count()
    post.save()
    return JsonResponse({"message": "successfully unliked", "no_of_likes": post.no_of_likes})

index.html с Javascript

{% if post.id not in liked_posts %}
    <button type = "button" class = "btn btn-primary" id = "like{{ post.id }}" onclick = "like('{{ post.id         }}')">Like</button>
{% else %}
    <button type = "button" class = "btn btn-primary" id = "unlike{{ post.id }}"onclick = "unlike('{{ post.id }}')">Unlike</button>
{% endif %}

function like(id) {
        fetch(`/like/${id}`, {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRFToken": "{{ csrf_token }}",
            },
        })
        .then(response => response.json())
        .then(data => {
            document.querySelector(".no-of-likes").innerHTML = data.no_of_likes + " likes";
        })
        .then(() => {
            document.getElementById("unlike" + id).style.display = "block";
            document.getElementById("like" + id).style.display = "none";
        });
    }

function unlike(id) {
        fetch(`/unlike/${id}`, {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRFToken": "{{ csrf_token }}",
            },
        })
        .then(response => response.json())
        .then(data => {
            document.querySelector(".no-of-likes").innerHTML = data.no_of_likes + " likes";
        })
        .then(() => {
            document.getElementById("unlike" + id).style.display = "none";
            document.getElementById("like" + id).style.display = "block";
        });
    }   

Я могу обновить счетчик, не обновляя страницу, но с кнопками дело обстоит иначе. Вот что происходит:

--> Когда я нажимаю кнопку «Нравится», счетчик обновляется. Мне нужно обновить страницу, чтобы изменить кнопку на «Не похоже». Согласно спецификации это должно быть сделано асинхронно (предполагается, с помощью Javascript!), без перезагрузки страницы.

--> То же самое и с кнопкой «Не похоже». Когда я нажимаю на него, счетчик обновляется, но мне приходится перезагрузить страницу, чтобы изменить кнопку на «Нравится».

Я хочу изменить кнопки без перезагрузки страницы. Пробовал размещать блоки кода в разных местах, пробовал использовать условия «если еще», но все равно застрял здесь. Любая помощь приветствуется! Извините за беспорядочный код Javascript, новичок здесь.