It replaces text input when buttons with multiple letters are selected

Question

I have a jsfiddle application below:

JSFIDDLE

If you open jsfiddle, you will see the top control that contains the answer buttons. You will also see buttons with letters, a "True" button and a "False" button.

The "True" and "False" buttons work fine, which means that if the user presses "True" and then presses "False", he replaces the text input, since you can not get the answer as "True" and "False".

But the problem is with the letter buttons. If you click on the letter buttons, you will realize that you can click on a few letters, which is good, but the problem is that it replaces the text input with those invalid letters. If multiple letter buttons are selected, then it should display the text inputs for all these letter buttons, and not replace the text entry with the very last letter.

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

Answer 1

You create a 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 identification variable in this case is the identifier of the button, which will be, for example, answerC . Thus, the first time you click the button, you will hide #hiddenanswerC0value .

However, when you add a response, the buttons will have an identifier generated as follows:

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

Thus, an additional Row will be added at the end. So the data-hid and input field will also be different ( #hiddenanswerCRow0value ).

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

Answer 2

It seems that the input id is not setting correctly on the first one you are having problems with. I show that it gets the identifier "# hiddenanswerC0value", but should be "# hiddenanswerCRow0value" if I am not mistaken. I will look at this a little more, but it may be enough for you to understand this.