Moving fieldsets within DOM excludes them from POST

I'm using the JQuery Formwizard plugin (http://thecodemine.org/) for one of my forms. This plugin allows you to add and remove elements to and from the form. Nice stuff! Only, the form elements I'm adding don't get included in the POST variable on the server-side handler of the form. How come? My code is kinda huge but here's the idea of what I'm doing:

<form id="wizard">
    <fieldset id="fieldset_person1" class="step开发者_如何学JAVA">
        Name: <input type="text" name="person1[name]" />
    </fielset>
    <fieldset id="fieldset_order" class="step">
        Amount: <input type="text" name="order[amount]" />
    </fieldset>
</form>
<div style="display: hidden">
    <fieldset id="fieldset_person2" class="step">
        Name: <input type="text" name="person2[name]" />
    </fielset>
</div>

The fieldset_person2 fieldset is then moved after where fieldset_person1 is and the wizard plugin is updated. But when I submit the form, the person2 fields aren't included. I've also tried adding the div to the form itself, but then it only gets included in the POST if it was not moved to the correct spot.

Any thoughts on this? I'm all out of ideas :/

---

I'm guessing that it's not going into the form can you show us the generated source also would be good to see the code that does the work

---

just a guess: make sure you're not hiding your inputs; hidden inputs are not sent with the form.

---

Ah, I finally got it. Apparently, HTML/Javascript/the JQery component doesn't like it when elements are moved in the DOM. Creating new elements however is not a problem.

I've renamed fieldset_person2 fieldset_person2_dummy and appended _dummy to all other ID's in that fieldset. When I want to add a page to the form, I use JQuery's clone() to clone this fieldset, change all ID's removing _dummy, and then append the element to the DOM. Works like a charm.

Thanks for the help guys, hope this is useful.