title: Repeating div with form fields
body: <p>I have a form where I want to be able to duplicate a group of fields as many times as I want.  And I also want to have field <code>id</code>, <code>name</code>, and label's <code>for</code> attributes of those new group of fields increase by 1. I've tried this so far with jQuery, and got it to at least duplicate the group of fields, but remove doesn't work.  And I'm not sure how to do +1 for each of those 3 attributes.  I appreciate any help I can get.</p>
  
  <p>Here's a jsfiddle of it,
  <a href="http://jsfiddle.net/Unfxn/" rel="nofollow">http://jsfiddle.net/Unfxn/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;form method="post" action="#" class="inlineForm" enctype="multipart/form-data"&gt;
      &lt;div class="repeatingSection"&gt;
          &lt;a href="#" class="buttonGray buttonRight deleteFight"&gt;Delete&lt;/a&gt;
          &lt;input type="hidden" name="fighter_a_id_1" id="fighter_a_id_1" value="" /&gt;
          &lt;input type="hidden" name="fighter_b_id_1" id="fighter_b_id_1" value="" /&gt;
          &lt;input type="hidden" name="winner_id_1" id="winner_id_1" value="" /&gt;
          &lt;div class="formRow"&gt;
              &lt;label for="fighter_a_1"&gt;Fighters&lt;/label&gt;
              &lt;input type="text" name="fighter_a_1" id="fighter_a_1" value="" /&gt; &lt;span class="formTextExtraCenter"&gt;vs&lt;/span&gt; &lt;input type="text" name="fighter_b_1" id="fighter_b_1" value="" /&gt;
          &lt;/div&gt;
          &lt;div class="formRow"&gt;
              &lt;label for="fighter_a_pay_1"&gt;Fighter Pay $&lt;/label&gt;
              &lt;input type="text" name="fighter_a_pay_1" id="fighter_a_pay_1" value="" /&gt; &lt;span class="formTextExtraCenter"&gt;vs&lt;/span&gt; &lt;input type="text" name="fighter_b_pay_1" id="fighter_b_pay_1" value="" /&gt;
          &lt;/div&gt;
          &lt;div class="formRow"&gt;
              &lt;label for="winner_1"&gt;Winner&lt;/label&gt;
              &lt;input type="text" name="winner_1" id="winner_1" value="" /&gt;
          &lt;/div&gt;
          &lt;div class="formRow"&gt;
              &lt;label for="method_1"&gt;Method&lt;/label&gt;
              &lt;input type="text" name="method_1" id="method_1" value="" /&gt;
          &lt;/div&gt;
          &lt;div class="formRow"&gt;
              &lt;label for="method_type_1"&gt;Method Type&lt;/label&gt;
              &lt;input type="text" name="method_type_1" id="method_type_1" value="" /&gt;
          &lt;/div&gt;
          &lt;div class="formRow"&gt;
              &lt;label for="round_1"&gt;Round&lt;/label&gt;
              &lt;input type="text" name="round_1" id="round_1" class="fieldSmall" value="" /&gt;
          &lt;/div&gt;
          &lt;div class="formRow"&gt;
              &lt;label for="time_1"&gt;Time&lt;/label&gt;
              &lt;input type="text" name="time_1" id="time_1" class="fieldSmall" value="" /&gt;
          &lt;/div&gt;
          &lt;div class="formRow"&gt;
              &lt;label for="fight_number_1"&gt;Fight #&lt;/label&gt;
              &lt;input type="text" name="fight_number_1" id="fight_number_1" class="fieldSmall" value="" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="formRowRepeatingSection"&gt;
              &lt;a href="#" class="buttonGray buttonRight addFight"&gt;Add Fight&lt;/a&gt;
          &lt;/div&gt;
      &lt;div class="formRow"&gt;
          &lt;input type="submit" class="submitButton" value="Save Fights" /&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>// Add a new repeating section
  $('.addFight').click(function(){
      var lastRepeatingGroup = $('.repeatingSection').last();
      lastRepeatingGroup.clone().insertAfter(lastRepeatingGroup);
      return false;
  });
  // Delete a repeating section
  $('.deleteFight').click(function(){
      $(this).parent('div').remove();
      return false;
  });
  </code></pre>