Toggle fa fa button is not changing when clicked

Question

I am building a BlogApp and I am trying to make a like button which changes when clicked. BUT when i click on star button then it doesn't fill with color.

Like is successfully adding BUT star like button is not changing.

template.html

    {% for i in p.likes.all %}
        {% if user == i.liker %}
            <a class='likebutton' data-catid="{{ p.id }}"><i id='like{{ p.id }}' class="btn fa fa-star-o fa-lg post-buttons "></i></a>
        {% elif forloop.last %}
            <a class='likebutton' data-catid="{{ p.id }}"><i id='like{{ p.id }}' class="btn fa fa-star-o fa-lg post-buttons "></i></a>
        {% endif %}

    {% empty %}
        <a class='likebutton' data-catid="{{ p.id }}"><i id='like{{ p.id }}' class="btn fa fa-star-o fa-lg post-buttons "></i></a>

    {% endfor %}

main.js

    $('main').on('click', '.likebutton', function(){
        var catid;
        catid = $(this).attr("data-catid");
        $.ajax(
        {
            type:"GET",
            url: "/likepost/",
            data:{
                post_id: catid
            },
            success: function(data){

            if(data==0){
                $('.like' + catid).toggle();
                $('#like' + catid).find('#like').toggleClass('fa-star-o fa-star');
                $('#likecount' + catid).html('');
                console.log(data+'if');
            }

            else if(data==1){
                if($('.like' + catid).is(":hidden"))
                {
                    $('.like' + catid).toggle();
                }

                $('#like' + catid).find('.like').toggleClass('fa-star-o fa-star');
                $('#likecount' + catid).html(data + ' like');
                console.log(data+'elseif');
            }
            else{

                $('#like' + catid).toggleClass("far fas");
                $('#likecount' + catid).html(data + ' likes');
                console.log(data+'else');
                }
            }

        })
    });

main.css

:root {
  font: 400 16px/1.5 Verdana;
}

.like {
  display: inline-block;
  font: inherit;
  padding: 0px 5px;
  cursor: pointer;
}

.like::after {
  content: ' Favorite'
}

Any help would be much Appreicated. Thank You in Advance.

Answer 1

I think it's because #like element doesn't exist:

$('#like' + catid).find('#like').toggleClass('fa-star-o fa-star');

Maybe try:

$('#like' + catid).toggleClass('fa-star-o fa-star');