it replaces a text input when multiple letter buttons are selected

Question

I have a jsfiddle application below:

JSFIDDLE

If you open the jsfiddle, you will see a top control which contains "Answer" buttons. You will also see some letter buttons, a "True" button, and a "False" button.

The "True" and "False" buttons work perfectly, meaning that if the user clicks on "True" and then clicks on "False", it replaces the text input as you can't have an answer both "True" and "False".

But there is a problem with the letter buttons. If you click on the letter buttons, you realise that you can click on multiple letter buttons which is fine, but the problem is that it replaces the text input for those letters which is incorrect. If multiple letter buttons are selected, then it should display the text inputs for all of those letter buttons, not replace the text input with the latest letter button selected.

So does anyone know what I need to change in the code in order to achieve this?

Answer 1

You generate an data-hid for the button here:

var hid = "hidden" + id + n + "value";  
$(btn).attr("data-hid", hid);

based on this you now generate an input field:

var input = '<input type="text" id="' + hid + '" value="' + value + '" name="' + id + 'value" />';

The id variable in this is the id of the button, which will be answerC for example. So with this you will get an hid of #hiddenanswerC0value when you first click the button.

However when you add an answer the buttons will have an id generated like this:

.attr('id', $this.attr('id')+'Row');

So it will have an extra Row at the end. So the data-hid and the input box will be different as well (#hiddenanswerCRow0value).

Edit: Another problem is that you don't actually create the data-hid for the new buttons. You only create it for the first set of buttons after clicking on them. But when you create the second set (after clicking) with the C button already activated it will not have the data-hid set and therefore you cannot delete it.