So I have some tables within list elements, that I can move around and reorder, and also I select them by changing background color. The order of the tables or rather the order of the list elements are saved in Local Storage:

2. function saveOrder() {
3.         var mapping = {}       
4.         $(".sortable").each(function () {
5.             var key = $(this).attr("id");  
6.             var data = $(this).children().map(function () {
7.                 return $(this).attr("id");
8.             }).get()
9.             mapping[key] = data
10.         })
11. 
    
12.         localStorage.setItem(getCurrentEvent() + "_Order", JSON.stringify(mapping));
13.     }

So I end up with this in Local Storage:

2. 0: ["0-0", "0-1", "0-2", "0-3", "0-4", "0-5", "0-6", "0-7", "0-8", "0-9"]
3. 1: ["1-0", "1-1", "1-2", "1-3", "1-4", "1-5", "1-6"]
4. 2: ["2-0", "2-1", "2-2", "2-3", "2-4", "2-5", "2-6"]

Then to save the higlighted tables in Local Storage I'm using this code:

2. .children().click(function () {
3.             $(this).find('.my-table).addClass('background-selected');
4.             $(this).prevAll().find('.my-table').addClass('background-selected');
5.             $(this).nextAll().find('.my-table').removeClass('background-selected');
6. 
   
7.             localStorage.setItem(getCurrentEvent() + "_Highlight", JSON.stringify(
8.                 $(".my-table").map(function () {
9.                     return $(this).hasClass("background-selected")
10.                 }).get()
11.             ))

Then I end up with this in Local Storage:

1. [true, true, true, true, false, false, false, false, false, false, true, false, false, false, false,…]

So the poblem is this:

1. <li id="0-0">[Table1]</li> <li id="0-1">[Table2]</li> <li id="0-2">[Table3]</li> <li="0-3">[Table4]</li>

If I select and highlight Table 1 (change background color) then I end up with this in Local Storage:

1. [true, false, false, false] 

Then if I decide to move Table1 to another position (or rather the <li> is moving and the table happens to be in it):

1. <li id="0-1">[Table2]</li> <li id="0-2">[Table3]</li> <li id="0-3">[Table4]</li> <li="0-0">[Table1]</li>

And deselect Table 1 and and instead select/highlighting Table 2 then in Local Storage I would still have:

1. [true, false, false, false]

And Table1 will still be selected after reloading the page. So I would need Local Storage to "understand" that the new selected table are Table 2. It's looks like my function that retreiving the selection is considering the previous first table to be the first one, even if it has change position. Maybe because the list element (holding the table) has ID 0-0 even if it no longer are in the first position:

2. if (highlights.length)
3.             $(".my-table").each(function (i) {
4.                 $(this).toggleClass("background-selected", highlights[i])
5.             });

Could there be a way to make use of the same function that keeps track of the order in Local Storage, something like this:

1.  0: ["0-0 [true]", "0-1 [false]", "0-2 [false]", "0-3 [false]"......]

? So that there would be no mistake on which table are highlighted. So when retrieving finding the right table, connected to that list element, and adding the class that highlights the table.