title: How can I dynamically add and remove <fieldsets> using prototype and scriptaculous?
body: <p>I'm writing a basic recipe organization application and I would like to be able to dynamically add additional items to the list of ingredients using Ajax.</p>
  
  <p>This is what one ingredient <code>&lt;fieldset&gt;</code> looks like:</p>
  
  <pre><code>&lt;fieldset id="ingredient_item_0"&gt;
      Ingredient &lt;input id="ingredient_0" type="text" size="20" /&gt;
      &lt;div id="ingredient_list_0" style="" class="autocomplete"&gt;&lt;/div&gt;
  
      Amount &lt;input id="amount_0" type="text" size="5" /&gt;
  
      Unit &lt;input id="unit_0" type="text" size="20" /&gt;
      &lt;div id="unit_list_0" class="autocomplete"&gt;&lt;/div&gt;
  
      Notes &lt;input id="notes_0" type="text" size="20" /&gt;
  
      &lt;script type="text/javascript"&gt;
          new Ajax.Autocompleter('ingredient_0','ingredient_list_0','ingredients.php', {'method':'get', 'paramName': 't'});
          new Ajax.Autocompleter('unit_0','unit_list_0','units.php', {'method':'get', 'paramName': 't'});
      &lt;/script&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>What is the best way (using prototype and scriptaculous) to add additional copies of this <code>&lt;fieldset&gt;</code> with the accompanying JavaScript to the page making sure each one has a unique ID?</p>