title: How to add multiple dynamic fields to a form using jquery & bootstrap 3.1
body: <p>I have multiple groups of dynamic fields I need to add to a form, I used an example to get the main bit working, but I need to setup the javascript to 'target' specific set of </p>
  
  <p><a href="http://www.bootply.com/0CstxlrED8" rel="nofollow">Here is a bootply example</a></p>
  
  <p>You can see that when the add button is clicked it adds[clones] a new field in the file-controls div. I need to somehow detect the class of the parent [well, 4th predecessor]  div when the add button gets clicked.</p>
  
  <p>How is this done? </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form id="form" name="form" method="post" class="form" role="form" action="[[~[[*id]]]]" enctype="multipart/form-data"&gt;
  
      &lt;input type="hidden" name="id" value="[[+id]]"&gt;
  
  
      &lt;div class="row"&gt;
  
        &lt;div class="form-group col-sm-6 [[!+fi.error.expires:notempty=` has-error`]]"&gt;
          &lt;label for="expires"&gt;Expires&lt;/label&gt;
          &lt;select name="expires" class="form-control"&gt;
            &lt;option value="24"&gt;24 hours&lt;/option&gt;
            &lt;option value="48"&gt;48 hours&lt;/option&gt;
            &lt;option value="72"&gt;72 hours&lt;/option&gt;
            &lt;option value="96"&gt;96 hours&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group col-sm-6 [[!+fi.error.origin:notempty=` has-error`]]"&gt;
            &lt;label for="origin"&gt;Origin&lt;/label&gt;
            &lt;input name="origin" type="text" id="origin" value="" class="form-control"&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
  
        &lt;div class="col-sm-12"&gt;&lt;label&gt;Tag numbers: &lt;/label&gt;&lt;/div&gt;
  
        &lt;div class="tag-controls"&gt; 
  
          &lt;div class="entry col-sm-4"&gt;
            &lt;div class="input-group"&gt;
              &lt;input class="form-control" name="fields[]" type="text" placeholder="Type something"&gt;
              &lt;div class="input-group-btn"&gt;
                &lt;button class="btn btn-success btn-add" type="button"&gt;&lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
  
        &lt;div class="col-sm-12"&gt;&lt;label&gt;Photos: &lt;/label&gt;&lt;/div&gt;
  
        &lt;div class="image-controls"&gt; 
  
          &lt;div class="entry col-sm-4"&gt;
            &lt;div class="input-group"&gt;
              &lt;input class="form-control" name="fields[]" type="text" placeholder="Type something"&gt;
              &lt;div class="input-group-btn"&gt;
                &lt;button class="btn btn-success btn-add" type="button"&gt;&lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
  
      &lt;/div&gt;   
  
      &lt;div class="row"&gt;
  
        &lt;div class="col-sm-12"&gt;&lt;label&gt;Files: &lt;/label&gt;&lt;/div&gt;
  
        &lt;div class="file-controls"&gt; 
  
          &lt;div class="entry col-sm-4"&gt;
            &lt;div class="input-group"&gt;
              &lt;input class="form-control" name="fields[]" type="text" placeholder="Type something"&gt;
              &lt;div class="input-group-btn"&gt;
                &lt;button class="btn btn-success btn-add" type="button"&gt;&lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          &lt;button type="submit" name="submit" id="submit" value="submit" class="btn button-sm btn-primary"&gt;Add Special Offering&lt;/button&gt;
      &lt;/div&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>// dynamic add form fields
  $(function(){
  
      $(document).on('click', '.btn-add', function(e){
  
          console.log('button clicked');
          e.preventDefault();
  
          var controlForm = $('.file-controls'),
          currentEntry = $(this).parents('.entry:first'),
          newEntry = $(currentEntry.clone()).appendTo(controlForm);
  
          console.log(controlForm);
          console.log(currentEntry);
          console.log(newEntry);
  
          newEntry.find('input').val('');
          controlForm.find('.entry:not(:last) .btn-add')
          .removeClass('btn-add').addClass('btn-remove')
          .removeClass('btn-success').addClass('btn-info')
          .html('&lt;span class="glyphicon glyphicon-minus"&gt;&lt;/span&gt;');
          }).on('click', '.btn-remove', function(e)
          {
  
          $(this).parents('.entry:first').remove();
  
          e.preventDefault();
          return false;
  
      });
  
  });
  </code></pre>