title: Cloning with jQuery
body: <p>I have a form that allows users to refer friends. I want to add a link below the two input fields, "friend email" and "friend name", that will clone "friend-box" one time and add it below. In addition, the name attribute of "friend email" and "friend name" are <code>name="friend_email[0]"</code> and <code>name="friend_name[0]"</code> as suggested <a href="https://stackoverflow.com/questions/4436606/how-to-process-tell-a-friend-data">here</a>. What's the best way to clone and increment the subscript? Here's the code:</p>
  
  <pre><code>&lt;div class="friend-box"&gt;
  
      &lt;div class="field"&gt;
          &lt;span&gt;&lt;label for='friend_name'&gt;&lt;strong&gt;Friend's Name *&lt;/strong&gt;&lt;/label&gt; &lt;/span&gt;
          &lt;input id='friend_name' name='friend_name[0]' type='text' /&gt;
      &lt;/div&gt;
  
      &lt;div class="field"&gt;
          &lt;span&gt;&lt;label for='friend_email'&gt;&lt;strong&gt;Friend's Email *&lt;/strong&gt;&lt;/label&gt;&lt;/span&gt;
          &lt;input id='friend_email' name='friend_email[0]' type='text' /&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>What's the best way to do this? One of the problems I had for example, is that when I cloned "friend-box" once and then twice, it obviously cloned it exponentially. So I'm guessing I need to have an ID number in there as well and increment it. Or, which is another method I saw, is to clone the "friend-box" when the page loads and keep cloning it from memory.</p>
  
  <p>Thanks,
  Ryan</p>