Q:

Making div contents persistant

I have an interesting problem, which I would like some help with if possible.
I have the following segments of HTML:
<div id="main_">
<ul class="unstyled">
    <ui:repeat var="adultPassenger" varStatus="adult" value="#{bean.adultPassengers}">
        <li>
            <div id="adult#{adult.index}" class="hitbox_">
                <div id="passengerTitle">Adult #{passengerDetailsBean.getPassengerCount(adult.index)}</div>
            </div>

            <div class="hide">
                <div id="adult#{adult.index}_form">
                    <div>
                        <div>
                            <div class="pull-left" style="width: 50%;">
                                <div><h:inputText value="#{adultPassenger.firstName}" class="pasFirstName_adult#{adult.index}" label="First Name"></h:inputText></div>
                            </div>
                            <div class="button-container">
                                <h:commandButton value="Continue" styleClass="btn btn-warning btn-large btn-block" onclick="handleDetailsClick('adult#{adult.index}')"></h:commandButton>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ui:repeat>
</ul>
</div>

and 
<div id="secondary_" class="hide">
    <table>
        <tbody>
            <tr>
                <td">
                    <h:commandButton id="secondaryBack" value="Back" styleClass="btn btn-warning">
                    </h:commandButton>
                </td>
                <td class="secondaryTitle">
                    <h3 class="page-title orange-title-big">Passenger Details</h3>
                </td>
            </tr>
        </tbody>
    </table>

    <div id="secondaryContents">

    </div>
</div>

They're both on the same page, and when the one div is visible the other is invisible. Thing is. Here's the JS I'm currently using:
$(".hitbox_").click(function() {
    var round = Math.round;
    var id = $(this).attr("id");

    window.alert(id);

    var f = $("pasFirstName_"+id).get();
    console.log("name " + f.value);

    // set contents of secondary div
    var passengerDetails = $("#" + id + "_form").html();
    $("#secondaryContents").html(passengerDetails);

    $("#main_").toggleClass("hide");
    $("#secondary_").toggleClass("hide");
});

function handleDetailsClick(index) {
    var passengerDetails = $("#" + index + "_form").html();
    $("#secondaryContents").html(passengerDetails);

    $("#main_").toggleClass("hide");
    $("#secondary_").toggleClass("hide");
}

What I want(and have tried, unsuccessfully, to achieve):
When the first div is clicked, it is hidden and the second div is shown after being populated with the hidden form in the first div. I do this to preserve class names etc, since there could be more than one such form.
When "Continue" is clicked, the second div is hidden, and it's contents passed back to the first div - I do this to preserve the details that were entered on the form.
My problem is that the details don't persist. When the same div is clicked again after having filled in the form before, it should should the form with the details that were previously entered.
This is where something goes wrong because there are never details in the form.
Does anyone know what I could be doing wrong?

A:

The problem is in the following lines
var passengerDetails = $("#" + id + "_form").html();

$("#secondaryContents").html(passengerDetails);

Here, you are taking HTML of one div and adding it to another. While this will surely create the same html in target div, it will not retain any user entered values as well as any events bound on elements.
You should, instead, take the element and append it to target
var passengerDetails = $("#" + id + "_form").children();
$("#secondaryContents").append(passengerDetails);

