I am currently designing a web page using javascript, html and css. The page is a seat booking seat which allows the user to select and unselect seats. I have managed to get the page to display id of the seat when the user have selected a seat, but I am having problems trying to remove id from the display if user unselects the seat.

Below is the javascript code

 $('.available, .unavailable, .selected').click(function(){ var ID = $(this).attr('class'); if (ID == 'n unavailable' || ID == 'p unavailable') { alert ('Seat is already booked. Please select another seat.'); } else if (ID == 'n selected' || ID == 'p selected') { alert ('You have now unselected this seat.'); $(this).html('<img src = "free.gif"/>'); $(this).removeClass('selected').addClass('available'); y--; $("#seats").html("Number of seats selected: " + y); $("#list").remove($(this).attr('id')); } else { alert ('You have now reserved this seat. You can unselect it by clicking the seat again.'); $(this).html('<img src = "selected.gif"/>'); $(this).removeClass('available').addClass('selected'); y++; $("#seats").html("Number of seats selected: " + y); $("#list").append($(this).attr('id') + "</br>"); } });