I have a slight situation in my app in my jsfiddle.

What I want to do which I can't achieve is that I want the functionality of the Option Type, Number of Answers and Answer buttons within each row to match the functionality on top. The problem is that under the "Answer" column within the new row it does not allow the user to select a button and the textbox under the "Number of Answers" button doesn't do anything but just display a number within the textbox.

Please follow these steps below to be able to use the app and see the problem.

Step 1: Open the fiddle and you see an options and answers section on top. Open the grid and select option 8. Buttons A to H would appear.

Step 2: Type in 2 in the Number of Answers Textbox.

Step 3: Select buttons A and D, you will find out that those buttons would turn green to show they are selected. Now as you entered in 2 in the Number of answers textbox (step 2), it won't let you select more than 2 buttons, if you do an alert would apear stating you are beyond limit please deselect a button to choose another button.

Step 4. Click "Add Question", a new row is added in the table.

Step 5: In the new row you just created, lets say that oh no I made a mistake, there should be 4 answers not 2 answers and within the table row you just added you changed the number of answers textbox from 2 to 4. My question is how can I get it so that it allows the user to select the buttons (turn buttons green) and deselect (turn buttons white) under the "Answer" column within in the row and that if the user has selected 4 buttons but tries to select a 5th button, it will come up with same error as in Step 3?

Whole code is in jsfiddle, click [here][1] Please test your answers in the fiddle if you wish before posting your answer. More chances of getting the correct answer


[1]: http://jsfiddle.net/rSdwa/15/