The class don’t remain on page refresh, i use jquery cookies plugin

I have a table and when i click on row i want to addclass .selectListItemReaded and persist on page refresh.

The plugin that i use it's https://github.com/carhartl/jquery-cookie

I have tried this code:

TABLE:

    <table cellpadding="1" cellspacing="1" width="100%" id="tabelRezultat">
    <tbody>
    <tr class="selectListHeader">
    <td class="selectListTitle inceput">Data cursei libere</td>
    <td class="selectListTitle">Plecare din</td>
    <td class="selectListTitle">Cursa spre</td>
    <td class="selectListTitle">Locuri disponibile</td>
    <td class="selectListTitle"></td>
    </tr>  
    <tr class="selectListItem" height="30">
    <td class="rezultat inceput">test1</td>
    <td class="rezultat">test2</td>
    <td class="rezultat">test2</td>
    <td class="rezultat">test3</td>
    <td class="rezultat"><a class="clickBut" target="_blank" href="#">detalii</a></td>
    </tr>
    <tr class="selectListItem" height="30">
    <td class="rezultat inceput"> another test1</td>
    <td class="rezultat">another test2</td>
    <td class="rezultat">another test2</td>
    <td class="rezultat">another test3</td>
    <td class="rezultat"><a class="clickBut" target="_blank" href="#">details</a></td>
    </tr>
    </tbody>
    </table>

HTML:

SCRIPT TO MAKE AUTOMATIC ID FOR <tr>

    jQuery(function ($) {
     
     var selectListItemDivs=$("tr.selectListItem");
     for(var i=0;i<selectListItemDivs.length;i++)
     {
        $(selectListItemDivs[i]).attr("id","child-"+i);
     }
      
      var clickButDivs=$("a.clickBut");
     for(var i=0;i<clickButDivs.length;i++)
     {
        $(clickButDivs[i]).attr("id","cursa-"+i);
     }
         
    });

Code (JavaScript):

AND SCRIPT FOR ADD CLASS AND COOKIES (but it's not working)

    jQuery(function ($) {
                    
      
        var cookieName = 'up_';
      
        $('tr.selectListItem').click(function() {
            var id = $(this).attr('id'), cookie = cookieName + id;
            //console.log($.cookie(cookie));
           if ($.cookie(cookie) !== 'true') {
            $(this).addClass('selectListItemReaded');
        }
        }).bind('click', function(e) {
            e.preventDefault();
            $.cookie(cookieName + $(this).attr('id'), true);
        });
    });

Code (JavaScript):

Can anybody help me with this ? I greatly appreciate your help .

 

Refresh Page refreshes the code. By design it goes back to the original. I think this is part of the javascript sandbox safety design. Someone on here must know if that is true.

I think usually if you want changes to have a back end membership profile and update the dbase with user preferences. I thought that updating a cookie to do this was not at all preferred way of using cookies. I have just assumed that this would be locked out as well for security.