title: Embedding multiple levels collection of forms in Symfony2
body: <p>I have the following situation: the CVCFormType is a collection of BenefiItemsFormType. Each BenefitItemFormType has one field that is a collection of BenefitGroupFormType.</p>
  
  <p>I want to be able to dynamically add and remove elements.</p>
  
  <p>I followed the instructions <a href="http://symfony.com/doc/current/cookbook/form/form_collections.html" rel="nofollow noreferrer">here</a>. Of course they must be tweaked as we talk about nested collections.</p>
  
  <p>On the "fixed" side everything is ok. On the dynamic side (to add and remove elements) so far I've implemented only the inner side (adding BenefitGroups) and only for adding fields.</p>
  
  <p>Here is what I get (which is not right). I have a double link on the top Benefit Item (I should have only one), plus the two group of links (of the first benefit
  item and of the second one) are not independent (I click on the second of the one above and it adds a field to the one below). I think I'll have to dynamically change the ul class name.</p>
  
  <p>Any help?</p>
  
  <p>Here is a screenshot:</p>
  
  <p><img src="https://i.stack.imgur.com/E2IHZ.png" alt="enter image description here"></p>
  
  <p>And here is the code:</p>
  
  <pre><code>{% extends "internal.html.twig" %}
  
  {% block content %}
  
  {{ form_start(form) }}
  &lt;br&gt;&lt;b&gt;CVC&lt;/b&gt;
  {% for benefititem in form.benefititems %}
  &lt;br&gt;&lt;b&gt;Benefit Item&lt;/b&gt;
  {{ form_row(benefititem.comment) }}
  
  &lt;br&gt;&lt;b&gt;Benefit Groups&lt;/b&gt;
      {# &lt;ul class="benefitgroups"&gt; #}
      &lt;ul class="benefitgroups" data-prototype="{{ form_widget(benefititem.benefitgroups.vars.prototype)|e }}"&gt;
          {% for benefitgroup in benefititem.benefitgroups %}
              &lt;li&gt;{{ form_row(benefitgroup.name) }}&lt;/li&gt;
          {% endfor %}
      &lt;/ul&gt;
  {% endfor %}
  
  {{ form_end(form) }}
  {% block javascripts %}
  &lt;script&gt;
  var $collectionHolder;
  
  // setup an "add a benefitgroup" link
  var $addBenefitGroupLink = $('&lt;a href="#" class="add_benefitgroup_link"&gt;Add a Group&lt;/a&gt;');
  var $newLinkLi = $('&lt;li&gt;&lt;/li&gt;').append($addBenefitGroupLink);
  
  jQuery(document).ready(function() {
  // Get the ul that holds the collection of benefit groups
  $collectionHolder = $('ul.benefitgroups');
  
  // add the "add a benefitgroup" anchor and li to the benefitgroups ul
  $collectionHolder.append($newLinkLi);
  
  // count the current form inputs we have (e.g. 2), use that as the new
  // index when inserting a new item (e.g. 2)
  $collectionHolder.data('index', $collectionHolder.find(':input').length);
  
  $addBenefitGroupLink.on('click', function(e) {
      // prevent the link from creating a "#" on the URL
      e.preventDefault();
  
      // add a new tag form (see next code block)
      addBenefitGroupForm($collectionHolder, $newLinkLi);
  });
  });
  
  function addBenefitGroupForm($collectionHolder, $newLinkLi) {
  // Get the data-prototype explained earlier
  var prototype = $collectionHolder.data('prototype');
  
  // get the new index
  var index = $collectionHolder.data('index');
  
  // Replace '__name__' in the prototype's HTML to
  // instead be a number based on how many items we have
  var newForm = prototype.replace(/__name__/g, index);
  
  // increase the index with one for the next item
  $collectionHolder.data('index', index + 1);
  
  // Display the form in the page in an li, before the "Add a BenefitGroup" link li
  var $newFormLi = $('&lt;li&gt;&lt;/li&gt;').append(newForm);
  $newLinkLi.before($newFormLi);
  }
  
  &lt;/script&gt;
  {% endblock %}
  {% endblock content %}
  </code></pre>
  
  <p>If it can help here is the generated HTML:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;title&gt;Welcome!&lt;/title&gt;
              &lt;link rel="icon" type="image/x-icon" href="/favicon.ico" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
          &lt;h1&gt;Here you are inside&lt;/h1&gt;
  
  &lt;form name="CVC" method="post" action=""&gt;
  &lt;br&gt;&lt;b&gt;CVC&lt;/b&gt;
  &lt;br&gt;&lt;b&gt;Benefit Item&lt;/b&gt;
  &lt;div&gt;                &lt;label for="CVC_benefititems_0_comment" class="required"&gt;Comment&lt;/label&gt;    &lt;input type="text" id="CVC_benefititems_0_comment" name="CVC[benefititems][0][comment]" required="required" maxlength="400" value="b1" /&gt;&lt;/div&gt;
  
  &lt;br&gt;&lt;b&gt;Benefit Groups&lt;/b&gt;
              &lt;ul class="benefitgroups" data-prototype="&amp;lt;div id=&amp;quot;CVC_benefititems_0_benefitgroups___name__&amp;quot;&amp;gt;&amp;lt;div&amp;gt;                &amp;lt;label for=&amp;quot;CVC_benefititems_0_benefitgroups___name___name&amp;quot; class=&amp;quot;required&amp;quot;&amp;gt;Name&amp;lt;/label&amp;gt;    &amp;lt;input type=&amp;quot;text&amp;quot; id=&amp;quot;CVC_benefititems_0_benefitgroups___name___name&amp;quot; name=&amp;quot;CVC[benefititems][0][benefitgroups][__name__][name]&amp;quot; required=&amp;quot;required&amp;quot; maxlength=&amp;quot;100&amp;quot; /&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;"&gt;
                          &lt;li&gt;&lt;div&gt;                &lt;label for="CVC_benefititems_0_benefitgroups_0_name" class="required"&gt;Name&lt;/label&gt;    &lt;input type="text" id="CVC_benefititems_0_benefitgroups_0_name" name="CVC[benefititems][0][benefitgroups][0][name]" required="required" maxlength="100" value="c1b1" /&gt;&lt;/div&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;div&gt;                &lt;label for="CVC_benefititems_0_benefitgroups_1_name" class="required"&gt;Name&lt;/label&gt;    &lt;input type="text" id="CVC_benefititems_0_benefitgroups_1_name" name="CVC[benefititems][0][benefitgroups][3][name]" required="required" maxlength="100" value="c2b1" /&gt;&lt;/div&gt;&lt;/li&gt;
                  &lt;/ul&gt;
  &lt;br&gt;&lt;b&gt;Benefit Item&lt;/b&gt;
  &lt;div&gt;                &lt;label for="CVC_benefititems_1_comment" class="required"&gt;Comment&lt;/label&gt;    &lt;input type="text" id="CVC_benefititems_1_comment" name="CVC[benefititems][4][comment]" required="required" maxlength="400" value="b2" /&gt;&lt;/div&gt;
  
  &lt;br&gt;&lt;b&gt;Benefit Groups&lt;/b&gt;
              &lt;ul class="benefitgroups" data-prototype="&amp;lt;div id=&amp;quot;CVC_benefititems_1_benefitgroups___name__&amp;quot;&amp;gt;&amp;lt;div&amp;gt;                &amp;lt;label for=&amp;quot;CVC_benefititems_1_benefitgroups___name___name&amp;quot; class=&amp;quot;required&amp;quot;&amp;gt;Name&amp;lt;/label&amp;gt;    &amp;lt;input type=&amp;quot;text&amp;quot; id=&amp;quot;CVC_benefititems_1_benefitgroups___name___name&amp;quot; name=&amp;quot;CVC[benefititems][5][benefitgroups][__name__][name]&amp;quot; required=&amp;quot;required&amp;quot; maxlength=&amp;quot;100&amp;quot; /&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;"&gt;
                          &lt;li&gt;&lt;div&gt;                &lt;label for="CVC_benefititems_1_benefitgroups_0_name" class="required"&gt;Name&lt;/label&gt;    &lt;input type="text" id="CVC_benefititems_1_benefitgroups_0_name" name="CVC[benefititems][6][benefitgroups][0][name]" required="required" maxlength="100" value="c2b2" /&gt;&lt;/div&gt;&lt;/li&gt;
                  &lt;/ul&gt;
  
  &lt;div&gt;&lt;button type="submit" id="CVC_submit" name="CVC[submit]"&gt;Do Something&lt;/button&gt;&lt;/div&gt;&lt;input type="hidden" id="CVC__token" name="CVC[_token]" value="MEUAU3VawkCDJ5jTHo5hSTGrgrWS6XUm-UXeEI9onT8" /&gt;&lt;/form&gt;
  </code></pre>
  
  <p></p>
  
  <p>Instead of a list I wish to do all this with tables (so adding and removing rows from the table).</p>
  
  <p>The final goal (adding an additional layer) will be the following:
  <img src="https://i.stack.imgur.com/GTApp.png" alt="enter image description here"></p>