[malcom p]

I have a grid of buttons the user can select from by opening the grid and selecting a button. Now if the user selects a button from the grid then it displays buttons "A" to whatever letter depending on the option selected from the grid. Now lets say the user clicks on the "Select All Answers" buttons, all buttons from "A" to whichever button turns green. Now if user decides to select another option from the grid, then what happens is that all the buttons that have been selected turns back to being unselected (turns back to a white color).

I do not want this to happen. If the user clicks a button from the grid then I do not want it to remove all selected buttons underneath, I want it to stay the same as what it was.

I want the same if the user changes the value in the "Number of Answers" textbox, I do not want it to turn selected buttons to being unselected.

How can this be done?

Code is in Jsfiddle, Click [here][1]


[1]: http://jsfiddle.net/aMmNL/9/