Cloning with jQuery

Question

I have a form that allows users to link to friends. I want to add a link below two input fields: "friend mail" and "friend name", which will clone the "friend-box" once and add it below. In addition, the name attribute is "friend mail" and "friend's name" name="friend_email[0]"and name="friend_name[0]"as suggested here . What is the best way to clone and grow an index? Here is the code:

<div class="friend-box">

    <div class="field">
        <span><label for='friend_name'><strong>Friend Name *</strong></label> </span>
        <input id='friend_name' name='friend_name[0]' type='text' />
    </div>

    <div class="field">
        <span><label for='friend_email'><strong>Friend Email *</strong></label></span>
        <input id='friend_email' name='friend_email[0]' type='text' />
    </div>

</div>

What is the best way to do this? One of the problems that I had, for example, was that when I cloned a friend’s field once and then twice, he obviously cloned it exponentially. Therefore, I assume that I also need to have an identification number and increase it. Or, another method I've seen is to clone a friend-window when a page loads and clones it from memory.

Thanks Ryan

Answer 1

I created an example here: http://jsfiddle.net/K8hhW/5/

You do not need to worry about increasing the number in parentheses, the form does this automatically for you.

Answer 2

[0], [], .

, : http://jsfiddle.net/EJv4g/3/

, div.friend-boxes, . jQuery , reset ( ). .friend-boxes.

append prepend, , .

, !

• Christian