Like/dislike button system in jQuery
<p>I want to have a like and dislike button and when one of them is clicked, it will change a colour to red. But when I click both, both like and dislike icons turn out to be red. I want only one of them to be red at all times not both. How do I fix it?</p>

<p>I'm wondering if I can write the code shorter by using CSS and .hasClass, .removeClass and .addClass in Jquery OR toggle.</p>

<p>Below is the jQuery code that I've written:</p>

<pre><code>$('#Like').on({
'click': function() {
    if($('#Like').attr('src') == 'images/Like.png') {
        $('#Like').attr('src','images/Liked.png');
        $('#Dislike').attr('src') == 'images/Dislike.png');
    }
    else {
        $('#Like').attr('src','images/Like.png');
    }
}
});

$('#Dislike').on({
'click': function() {
    if($('#Dislike').attr('src') == 'images/Dislike.png') {
        $('#Dislike').attr('src','images/Disliked.png');
        $('#heartLike').attr('src') == 'images/Like.png');
    }
    else {
        $('#Dislike').attr('src','images/Dislike.png');
    }
}
});
</code></pre>

<p>Here, #like and #dislike are the original like and dislike icons.</p>

<p>Like.png and Dislike.png are the images without colour and Liked.png and Disliked.png are the images with filled in red colour.</p>