title: How to dynamically add and remove fields for more than one?
body: <p>Is there an easier way in JQuery to dynamically add and remove fields for more than one field within the same form?  I have two form elements in the same form that I'd like to have the ability to add and remove blank fields to.</p>
  
  <pre><code>&lt;div class="col-sm-3"&gt;
      Email&lt;g:field type="email" name="Email" class="form-control" required="" value="" aria-labelledby="Email-label"/&gt;
  &lt;/div&gt;
  &lt;div class="col-sm-2"&gt;  
      Fax&lt;g:field type="tel" name="Fax" class="form-control" required="true" value="" aria-labelledby="Fax-label"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have cobbled together this javascript piece from several different places and it works just fine for the first field, but when I try to duplicate it for the second one it doesn't work.</p>
  
  <pre><code>$(document).ready(function(){
      $("#add").click(function (e) {
          $("#submitterEmail").append('&lt;div&gt;&lt;input type="text" name="submitterEmail[]"&gt;&lt;button class="delete"&gt;Delete&lt;/button&gt;&lt;/div&gt;');
      });
  
  $("body").on("click", ".delete", function (e) {
      $(this).parent("div").remove();
  });
  });
  </code></pre>