It does not remove text input when turning off button in appended row

[rachidis]

I am just having trouble removing a text input. You can see and test for yourself here. Please follow steps below:Click on "Open Grid" and select button 4, 4 letter buttons will appear.Turn on letter C, the button will turn green and you will see the text input for that letter below. This is fine. Now turn the button off and the button turns white and the text input is removed, this is fine as well. Now make sure that button C is on.Click on the "Add Question" button and you will see it will append the control into a new row.Now this is the problem, if you turn off button C within the row, you will see that it does not remove the text input. This is incorrect.What I want is that if a button within an appended row is turned off, it should remove the text input below. Does anyone know what needs to be changed in the function below so that it removes an input in an appended row?Below is the function:function btnclick(btn){ var context = $(btn).parents('#optionAndAnswer'); if(context.length == 0) { context = $(btn).parents('tr'); } var $btn = $(btn); var value = http://stackoverflow.com/questions/12753628/btn.value; var id = $btn.attr('id'); if ($(btn).hasClass('answerBtnsOff')) { var n = $("input[name='" + id + "value']").length; var hid = "hidden" + id + n + "value"; $(btn).attr("data-hid", hid); // append those values to the form var input = '<input type="text" id="' + hid + '" value="' + value + '" name="' + id + 'value" />'; $('#QandA').append(input); // toggle the button $btn.removeClass('answerBtnsOff').addClass('answerBtnsOn'); // do the opposite - remove the input } else { $("#" + $(btn).attr("data-hid")).remove(); $btn.removeClass('answerBtnsOn').addClass('answerBtnsOff'); } $('.answertxt', context).val(context.find('.answerBtnsOn').length > 0 ? context.find('.answerBtnsOn').length : 0); return false;}Below is the code for the letter buttons which appear in the appended rows:function insertQuestion(form) { var context = $('#optionAndAnswer'); var currenttotal = context.find('.answerBtnsOn').length; var $tbody = $('#qandatbl > tbody'); var $tr = $("<tr class='optionAndAnswer' align='center'>"); var $td = $("<td class='extratd'>"); var $answer = $("<div class='answer'>3. Answer:<br/></div>");var $this, i=0, $row, $cell;$('#optionAndAnswer .answers').each(function() { $this = $(this); if(i%7 == 0) { $row = $("<tr/>").appendTo($answer); $cell = $("<td/>").appendTo($row); } var $newBtn = $("<input class='answerBtnsRow answers' type='button' style='display:%s;' onclick='btnclick(this);' />".replace('%s',$this.is(':visible')?'inline-block':'none')).attr('name', $this.attr('name')).attr('value', $this.val()).attr('class', $this.attr('class')).attr('id', $this.attr('id')+'Row'); $newBtn.appendTo($cell); i++;}); $tr.append($td); $td.append($answer); $tbody.append($tr); }The letter buttons in the appended row are copied from the letter buttons in top control, the code for the letter buttons in the top control is below:<table id="optionAndAnswer" class="optionAndAnswer"><tr><tr class="answer"><td>3. Answer</td><td><?php $a = range("A","Z");?><table id="answerSection"> <tr><?php $i = 1; foreach($a as $key => $val){ if($i%7 == 1) echo"<tr><td>"; echo"<input type=\"button\" onclick=\"btnclick(this);\" value=http://stackoverflow.com/"$val\" id=\"answer".$val."\" name=\"answer".$val."Name\" class=\"answerBtns answers answerBtnsOff\">"; if($i%7 == 0) echo"</td></tr>"; $i++; }?> </tr></table></td></tr></table>