Dynamically added text box is appended to the wrong form elements

It will be easy to see using this jsfiddle:

http://jsfiddle.net/6xPye/4/

What I have is two dropdowns whose values change depending on what you select in the first.

This all works fine, even with the form submission but what I want to do now is for some values in the first drop down, is to produce the middle dropdown and a text box instead of 2 dropdowns.

I have it slightly 开发者_开发问答working but if you choose escherpropname first, it breaks the dynamic elements that are added afterwards.

Any help is much appreciated.

Thanks,

Martin

I think you'll want to change the way you're adding a textbox, here's one solution

HTML:

<!-- remove textbox -->
<!--<input type="text" name="valuestextbox[]" class="valuestextbox"/>-->

jQuery:

// in document .ready change these lines
//$valuestextbox = $('.valuestextbox'); *remove*
//$valuestextbox.hide(); *remove*
// Create a textbox as needed
$valuestextbox = $('<input type="text" name="valuestextbox[]" class="valuestextbox"/>'); // *add*

...

// in your test for 'escherpropname'
//$valuestextbox.show(); *remove*
$values.after($valuestextbox.clone()); // *add*

updated fiddle: http://jsfiddle.net/pxfunc/6xPye/5/