Question

In my application the user opens up a grid and selects an option. After the user selects the option if they click on the “Add question” button then it will add a new row in the table showing the option value in the textbox.

Now lets say the user changes their mind and wants in the table row they have added they wanted to change their option value, the user can open the grid by clicking on the “Open Grid” link within the table row and select another option. The only problem is that the option they have chosen should be displayed in the textbox with in the table row but it isn’t, instead it appears on the top textbox where the user originally selects an option.

So how can I get it so that if the user changes an option within a table row, that the value is displayed in the textbox within the row and not the textbox in top?

Steps to follow in my fiddle to help you:

1. Open the grid and select option “3”

2. click on “Add Question”, you can see a new row has been added showing the option you have chosen in the textbox

3. Now in the new row you have added click on the “Open Grid” link and select option “5”. Now as you can see the text box in the table row still states “3” but if you look at the textbox on top, it shows “5”. The textbox on top should not change to “5”, it should be the textbox with in the table row.

Use the jsfiddle so you can see what I mean and you can use it to test your ideas, click here

Answer 1

First of all, you don’t have to hide a set of matched elements after fading them out.
Referring to:

$('body').on('click', function() {
    $('#optionTypeTbl').fadeOut('slow');
    $('#optionTypeTbl').hide();
});

Then I personally think the code could be better. You basically have the options table as a fixed element. But you actually could also remove it as it ends fading, of course still having it in a variable within your script, and append it as the user clicks on [Open Grid] to somewhere appropriate. (I still haven’t gone through your entire code so I can’t provide a sample right away. Give me some time on that.) Then, instead of using

$('#optionTypeTbl input').click(function() {
    $(".gridBtns").removeClass("gridBtnsOn");
    $(this).addClass("gridBtnsOn");
    // THIS FOLLOWING LINE
    $('.box INPUT').val($(this).val());
    $('#optionTypeTbl').hide();
});

since you have now made your options table a child of the parent of the clicked [Open Grid] link, you can refer to its parents by using closest like this:

$( this ).closest( 'tr' ).find( '.box input' ).val( $( this ).val( ) );

To be honest, I couldn’t solve your problem without changing great parts of your behavior. I’d need a little time to fix you my version of the code.

EDITH:

Okay, so I’ve worked on your fiddle and came up with a working snippet. Here you go!