JSFiddle - React, Tailwind, and code Playground

HTML

<div class="evt_date"  style="overflow:hidden" style="overflow:hidden" itemscope itemtype="http://schema.org/Event">
    <a href="#" class="favourate_dextop" id="fav1"
        data-sess_id='1'
        data-name='blah1'
        data-city='NY'
        data-country='US' 
        data-event_url='blah.com' ></a>
</div>

<div class="evt_date"  style="overflow:hidden" style="overflow:hidden" itemscope itemtype="http://schema.org/Event">
    <a href="#" class="favourate_dextop" id="fav2"
        data-sess_id='2'
        data-name='blah2'
        data-city='NY'
        data-country='US' 
        data-event_url='bla.com' ></a>
</div>

CSS

.favourate_dextop{
    background:url('http://im.gifbt.com/images/star1_phone.png') no-repeat;
    display:block;
    height:19px;
    width:18px;
}
.favourate_dextop.faved, .favourate_dextop:hover{
    background:url('http://im.gifbt.com/images/star1_phonehover.png') no-repeat;
}

JavaScript

$(document).ready(function(){
    var eventData = {};
    if (localStorage.getItem('eventData') !== null) {
        $.each(eventData = JSON.parse(localStorage.getItem('eventData')), function(id){
            $('#'+id).addClass('faved');
        });
    }
    $('.favourate_dextop').click(function(e){
        e.preventDefault();
        if (eventData[this.id] !== undefined) {
            delete eventData[this.id];
        }else{
            eventData[this.id] = $(this).data();
        }
        $(this).toggleClass('faved');
        localStorage.setItem('eventData', JSON.stringify(eventData));
        console.log(eventData);
    });  
});