I need to click the table and change the backgound which would be pretty simple:

2. $('.table-inside-li').on('click', function () {
3.             $(this).toggleClass('background-selected');
4.         });

But the thing is that I also need to change the background of all tables that are within previous <li> as well. They are all lined up horizontally (well I guess it doesn't matter if it's vertical or horizontally as far as the solution goes).

So let's say I have this:

<li> [1]</li> <li> [2]</li> <li> [3]</li> <li> [4]</li> <li> [5]</li>

So when I click on table 4 and change background I also need all the previous once to do the same. That would be changing bg color for 1, 2 and 3 also.

Also I would need a sort of opposite functionallity as well. So when I click on table 2 all the tables placed after table 2 will be be "deselected" and turn back to default color, which in this case is white. The clicked table will remain it's bg color (yellow or something) and the same goes for table 1 of course.

<li> [1]</li> <li> [2]</li> <li> [3]</li> < li>[4]</li> <li> [5]</li>

Also when clicking table 1 the remaining tables will be "deselected":

<li> [1]</li> <li >[2]</li> <li> [3]</li> < li>[4]</li> <li> [5]</li>

This would mean that there could be no way to "deselect" table 1, but at least one needs to be selected anyway.

So what could be the solution for doing this? My JQuary knowledge is to limited to figure this out. I've seen that there is a function called prevAll(), and maybe that is something to use in this case.