I have a number of Answers textbox which the user enters in the number of answer he/she like to select. Now lets say the user opens the grid and selects option "5" and clicks on the "Select All Answers" buttons, all the 5 buttons "A" to "E" turn greeen and it will state 5 in the Number of Answers Text-Box.

But problem is that if I change the option from the grid from "5" to "3", then you will see 3 buttons "A" to "C" all selected which is fine but problem is that it still states the number "5" in the Number of Answers Text-Box when it should state 3 because there are 3 buttons selected (not because it displays 3 buttons, it is because 3 buttons are selected (have turned green).

So How can I get it so that the text-box displays the correct number of buttons selected from the buttons displayed on screen?

This line of code you need to look at is in the $(".gridBtns").click(functions():
Code:
 $('#numberAnswerTxt').val($('.answerBtnsOn:visible').length)
Follow steps below in my jsfiddle:

1. Open the Grid and select option "5". Buttons A to E would appear.
2. Click "Select All Answers" buttons. All buttons A to E would be selected (turn green) and the "Number of Answers" textbox would display the number 5.
3. Now Open the Grid again and select option "3". As you can see buttons A to C would appear and are all selected (turn green). Yet the textbox still displays the number 5. This should display number 3.

code in jsfiddle, click here