jQuery How to clear / replace the stored value in

Question

Thanks to all the help previously, i have managed to come to this far: I am able to add row to the table and select an option and display a text input. Here is the Fiddle link. Previously i used multiselect but i changed to single select now because multiselect has caused problem in display my "Output Type" (may be you can suggest better ways to do it ;) )

Now I am facing another problem where the value stored in the variable will not get replaced by the new input value. Therefore, "Output Number" column will only show the first number input. Another weird thing is, it can only take in/update input from 'Zone Input' as it is placed the first in the html div. i tried to change others to the top and same thing happened too.

var textInput = "";
$('.TextInput').empty();
textInput = $('.TextInput').val();

I tried .empty() but it doesn't work as you can see. Each of the div has different ID. But if i use ID like i tested for just one of them previously, var textInput = $('#outputTextInput').val(); , how can i do it the same for others? do i use OR || like var textInput = $('#outputTextInput').val() || $('#zoneTextInput').val(); ?

Also, must i create another function for "Arm" since it is using a checkbox rather than text input?

Update: This is working but not on my program :(( http://jsfiddle.net/yvonnezoe/MKfLU/1/

UPDATE: I found the problem with this! See my problem here: jQuery vs jQuery Mobile - Does the script sequence matter?

Answer 1

Try to replace this lines in your code:

$('.TextInput').empty();
textInput =  $('.TextInput').val();

With this:

$('.TextInput').not($(this).prev('.TextInput')).val('');
textInput =  $(this).prev('.TextInput').val();

and try again...

Here's your markup:

<input type="text" class="TextInput" id="zoneTextInput" value="">
<input type="submit" class="add" value="Add" />

Now when you click on the Add button with class add, then $(this) represents the element in the current scope and the $(this).prev('.TextInput') represents the element previous to it with the class TextInput (Here, the input text-box). So, $(this).prev('.TextInput').val() will give you the value of the current textbox with add button you have clicked. Whereas, $('.TextInput').val() gives you the value of the first element no matter which add button is clicked.

For more details: prev() and not()

Answer 2

textInput=$(this).prev().val(); works because in the click event, this is pointing to the button, prev selects the prior element in the dom (in this case the input element) and then .val() selects the value of it. What part still isn't working?