One requirement is that if someone booked a chair, someone ele shouldn't be able to book it anymore.

My idea was to add a class to the selected chairs when you click "Buy tickets" on the bottom of the page, but how can I save these classes, my professors say I should use HTML 5 storage, but they refuse to help me any further.

This is a part of what I already have now:

2. <script>
3. var total = 0;
4. var countBlauw = 0;
5. var countOranje = 0;
6. var countRood = 0;
7. $(document).ready(function(){
8.     $(".blauw").toggle(function () {
9.       $(this).removeClass("blauw").addClass("select");
10. countBlauw++;
11. total+=7.5;
12. calculateTotal();
13. }, function() { 
14.       $(this).removeClass("select").addClass("blauw");
15. countBlauw--;
16.       total-=7.5;
17. calculateTotal();
18.     });
19. $(".oranje").toggle(function () {
20.       $(this).removeClass("oranje").addClass("select");
21. countOranje++;
22. total+=10;
23. calculateTotal();
24. }, function() {
25.       $(this).removeClass("select").addClass("oranje");
26. countOranje--;
27.       total-=10;
28. calculateTotal();
29.     });
30. $(".rood").toggle(function () {
31.       $(this).removeClass("rood").addClass("select");
32. countRood++;
33.       total+=15;
34. calculateTotal();
35. }, function() {
36.       $(this).removeClass("select").addClass("rood");
37. countRood--;
38.       total-=15;
39. calculateTotal();
40.     });
41. });
42. </script> 
43.         <script>
44.         function calculateTotal()
45.         {
46.             var divobj = document.getElementById('totalPrice');
47.             divobj.style.display='block';
48.             divobj.innerHTML = "Prijs €"+total+"<br /> Aantal blauwe stoelen: "+countBlauw+"<br /> Aantal oranje stoelen: "+countOranje+"<br /> Aantal rode stoelen: "+countRood;
49.         
50.         }
51.         </script> 
52.         
53.         <table style="empty-cells: hide; border-collapse:separate; border-spacing:2px; border-style:solid;" border="0">
54.           <tr>
55.             <td class="leeg"></td>
56.             <td class="leeg"></td>
57.             <td class="blauw">&nbsp;</td>
58.             <td class="blauw">&nbsp;</td>
59.             <td class="blauw">&nbsp;</td>
60.             <td class="blauw">&nbsp;</td>
61.             <td class="blauw">&nbsp;</td>
62.             <td class="blauw">&nbsp;</td>
63.             <td class="blauw">&nbsp;</td>
64.             <td class="blauw">&nbsp;</td>
65.             <td class="leeg"></td>
66.             <td class="leeg"></td>
67.           </tr>
68.             And so forth.
69. 
    
71.         <script>
72. $(window).load( function() {
73. document.getElementById('totalPrice').innerHTML = "Prijs €"+total+"<br /> Aantal blauwe stoelen: "+countBlauw+"<br /> Aantal oranje stoelen: "+countOranje+"<br /> Aantal rode stoelen: "+countRood;
74. });
75. </script>
76.         <div id="totalPrice"></div>

But this isn't the only problem....

Because there are 3 cinema halls, different dates and different movies....

I'd like to combine it all in one page, but I guess that'd be extremely difficult to make.

Could someone please give me some advice?