Buttons are displayed where they shouldn't be
In my application I have some buttons which should not be either be displayed or hidden depending on the option. Follow these steps below in my fiddle to see what is happening in my application:
step 1: Open the grid and select option 3, you will see 3 buttons "A" to "C" will appear and two buttons will appear below them "Select All Buttons" and "Remove All Buttons".
step 2: Click on the "Add Question" and it will add a new row underneath displaying the option you have selected and the answer with it.
step 3. Now this is where the problem occurs. If you change the option in the row you have just added to "True or False", it will remove the "Select All Answers" and "Remove all answers" buttons. This is because I have stated that
if option equals "True or False". Then hide the buttons "Select All Answers" and "Remove All Answers". But as the option is changed within the row you have added and not in the top control, it should not have any affect on the
top control at all.
So what my question is that if an option is changed within one of the rows underneath, what do I need to change in the code so that it does not have an affect on the "Select All Answers"
and "Remove All Answers" buttons. As you can see if the option changes within a row, it does not change the "Option Type" on the top control and the Answer Buttons do not change at the top control.
I want the same with the "Select All Answers" and "Remove All Answers" buttons where it is not affected in the top control when a option is changed within one of the added rows.
Code is in JsFiddle, click here