title: Create repeating form section, remove field values
body: <p>I have a form with a repeating section. To create the repeating section, I am using a slight variant of this code:</p>
  
  <pre><code>// Add a new repeating section
  var attrs = ['for', 'id', 'name'];
  function resetAttributeNames(section) { 
      var tags = section.find('input, label'), idx = section.index();
      tags.each(function() {
        var $this = $(this);
        $.each(attrs, function(i, attr) {
          var attr_val = $this.attr(attr);
          if (attr_val) {
              $this.attr(attr, attr_val.replace(/_\d+$/, '_'+(idx + 1)))
          }
        })
      })
  }
  
  $('.addFight').click(function(e){
          e.preventDefault();
          var lastRepeatingGroup = $('.repeatingSection').last();
          var cloned = lastRepeatingGroup.clone(true)  
          cloned.insertAfter(lastRepeatingGroup);
          resetAttributeNames(cloned)
      });
  
  // Delete a repeating section
  $('.deleteFight').click(function(e){
          e.preventDefault();
          var current_fight = $(this).parent('div');
          var other_fights = current_fight.siblings('.repeatingSection');
          if (other_fights.length === 0) {
              alert("You should atleast have one fight");
              return;
          }
          current_fight.slideUp('slow', function() {
              current_fight.remove();
  
              // reset fight indexes
              other_fights.each(function() {
                 resetAttributeNames($(this)); 
              })            
          })   
      });
  </code></pre>
  
  <p>JSFiddle of it - <a href="http://jsfiddle.net/Unfxn/27/" rel="nofollow noreferrer">http://jsfiddle.net/Unfxn/27/</a></p>
  
  <p>I originally found the code from this thread:
  <a href="https://stackoverflow.com/questions/11380045/repeating-div-with-form-fields">Repeating div with form fields</a></p>
  
  <p>However, there is a problem with this code: if you fill in the form fields, and then click "add fight," the new repeated section not only duplicates the form fields, but also their values.  I think I need to use something like this to clear the values of the new form section:</p>
  
  <pre><code>$(this).closest('form').find("input[type=text], textarea").val("");
  </code></pre>
  
  <p>but I'm not sure how to incorporate that into the functions I already have. So how can I clear the value of the fields once the new form section has been created?</p>