title: How to add (clone) form fields using jQuery and increment ids and names
body: <p>Since it took me a couple of days in order to find a good way to achieve what I wanted, I thought I'd post this Q&amp;A to save others some precious time and unhealthy frustration :3. I simplified the code as much as I could (like removing form action, etc.).</p>
  
  <p>Basically, what I wanted to do is make this :</p>
  
  <pre><code>&lt;form&gt;
      &lt;p&gt;
          &lt;input type="button" value="Add phone number"&gt; 
      &lt;/p&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>become this (by clicking on the button) :</p>
  
  <pre><code>&lt;form&gt;
      &lt;div&gt;
          &lt;p&gt;
              Phone number : &lt;input type="text" name="phone_number1"&gt; 
              &lt;input type="button" id="remove_phone_number1" value="Remove"&gt;
          &lt;/p&gt;
      &lt;/div&gt;
      &lt;p&gt;
          &lt;input type="button" value="Add phone number"&gt;
      &lt;/p&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>and, if I click one more time, it would become this :</p>
  
  <pre><code>&lt;form&gt;
      &lt;div&gt;
          &lt;p&gt;
              Phone number : &lt;input type="text" name="phone_number1"&gt; 
              &lt;input type="button" id="remove_phone_number1" value="Remove"&gt;
          &lt;/p&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;p&gt;
              Phone number : &lt;input type="text" name="phone_number2"&gt; 
              &lt;input type="button" id="remove_phone_number2" value="Remove"&gt;
          &lt;/p&gt;
      &lt;/div&gt;
      &lt;p&gt;
          &lt;input type="button" value="Add phone number"&gt;
      &lt;/p&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>(all that with a working Remove button, of course)</p>
  
  <p>I thought doing such a thing was pretty straightforward and easy, but I had a really hard time finding a solution.</p>