I am implementing my own Like/Unlike system for my website. The PHP part is already done and all working, but I'm trying to make the Like/Unlike process all asynchronous with jQuery's AJAX methods.

What I'm trying to achieve is let an user press the like button and then the like button will become yellow (like being pressed) and the URL will change to *unlike* and when clicked, the user will basically unlike the item and the button will get its original color again.

The liking part is already working, but I'm failing to toggle between these two.

This is what I've been trying:

HTML/TWIG:

```
<li><a href="{{ S_IMAGE_NAME }}?do={% if S_IMAGE_LIKED == true %}un{% endif %}like" data-image-action="likeUnlike"><span class="glyphicon glyphicon-thumbs-up" {% if S_IMAGE_LIKED == true %}style="color: #f0c36d;" title="Unlike"{% else %}title="Like"{% endif %} data-placement="right"></span></a></li>

```

jQuery:

```
$('[data-image-action="likeUnlike"]').click(function(e){

    var likeHref    = $(this).attr('href');
    var likeUnlike  = (likeHref.indexOf('unlike') != -1) ? 'unlike' : 'like';
    var unLikeUrl   = likeHref.replace(!likeUnlike, likeUnlike); // This is wrong, but how else do I do this?
    var thumbColor  = (likeUnlike == 'like') ? '#f0c36d' : '#eee';

    $(this).attr('href', unLikeUrl);
    $('.image-options .glyphicon-thumbs-up').attr('data-original-title', ucfirst(likeUnlike));
    $('.image-options .tooltip-inner').text(ucfirst(likeUnlike));
    $('.image-options .glyphicon-thumbs-up').css('color', thumbColor);

    $.ajax({
        type: 'GET',
        url: likeHref,
        success: function(data){

            // console.log(data); return;
            var response = $.parseJSON(data);

            if ('error' in response)
            {
                display_alert(response.error, 'danger', 3000, 'top');   
                return;
            }

            $('.likeCount').text(response.likeCount);
        }
    });

    e.preventDefault();
    return false;
});

```

After refreshing the page, the logic works great enough with the Twig if statements, but I want to achieve the same without having to reload the page.

So again in summary:

* User clicks *Like*
* Glyphicon turns yellow, title changes to *Unlike* and URL changes to *unlike*
* User now clicks *Unlike*
* Glyphicon turns light greyish, title changes to *Like* and URL changes to *like*

How can I achieve this? What's wrong in my code?