Photo gallery css selected state not read by cookie

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<div class="ele cat_collection" data-id="1" data-category="collection">
    <div class="thumbnail paper-shadow">
        <div class="hover-menu-container">
            <div class="hover-menu">
                <ul>
                    <li><a class="btn-cmd btn-concrete selectThis" href="#"><i class="glyphicon glyphicon-check"></i> Select 1</a></li>
                    <li><a class="btn-cmd btn-concrete read-this" href="#" data-target=".R1"><i class="fi fi-pencil-cap"></i></a></li>
                </ul>
            </div>
            <div class="thumb-image">

            </div>
        </div>
    </div>
</div> 

<div class="ele cat_collection" data-id="2" data-category="collection">
    <div class="thumbnail paper-shadow">
        <div class="hover-menu-container">
            <div class="hover-menu">
                <ul>
                    <li><a class="btn-cmd btn-concrete selectThis" href="#"><i class="glyphicon glyphicon-check"></i> Select 2</a></li>
                    <li><a class="btn-cmd btn-concrete read-this" href="#" data-target=".R1"><i class="fi fi-pencil-cap"></i> </a></li>
                </ul>
            </div>
            <div class="thumb-image">

            </div>
        </div>
    </div>
</div> 

<div class="ele cat_collection" data-id="3" data-category="collection">
    <div class="thumbnail paper-shadow">
        <div class="hover-menu-container">
            <div class="hover-menu">
                <ul>
                    <li><a class="btn-cmd btn-concrete selectThis" href="#"><i class="glyphicon glyphicon-check"></i> Select 3</a></li>
                    <li><a class="btn-cmd btn-concrete read-this" href="#" data-target=".R1"><i class="fi fi-pencil-cap"></i></a></li>
                </ul>
            </div>
            <div class="thumb-image">

            </div>
        </div>
    </div>
</div>

CSS

.thumbnail a {    
    text-decoration : none;
    color: grey;
}

.selected .thumbnail{   
    font-size: 22px;
    font-weight : bold;
    background : green;
}

.selected .thumbnail a{   
    color: #fff;
    text-decoration : none;
}
ul, li {
    list-style: none;
}

JavaScript

var classesArray = $.cookie('selected') ? $.cookie('selected').split(',') : [];

$.each(classesArray, function(k, v) {
    $('.ele[data-id="'+v+'"]').addClass('selected');  
});

$('.selectThis').on('click', function () {
    $(this).closest('.ele').toggleClass('selected');
    classesArray = [];
    $('.ele.selected').each(function(){
        classesArray.push($(this).data('id'));
    });
    $.cookie("selected", classesArray.join(','), { expires: 365, path: '/'});
});