title: Symfony collection field type within a collection field type: add / remove elements
body: <p>i've got a problem regarding the symfony collection field type.
  Working with one collection type (adding, removing items) is clear due to the cookbook entry of symfony for working with collection field type. For me, the problem appears when i want to add / remove items to a collection type within a collection type. Example:
  I have an addresses collection that gets added to my Contact Type class</p>
  
  <pre><code>public function buildForm(FormBuilderInterface $builder, array $options)
  {
      $builder
        -&gt;add('addresses', 'collection', array(
            'type' =&gt; new AddressType(),
            'allow_add' =&gt; true,
            'allow_delete' =&gt; true,
            'prototype' =&gt; true,
            'by_reference' =&gt; false,
          ))
       ;
  }
  </code></pre>
  
  <p>This addresses collection gets as type "AddressType", which looks the following:</p>
  
  <pre><code>public function buildForm(FormBuilderInterface $builder, array $options)
  {
      $builder
      // name = country
        -&gt;add('name', 'text')
        -&gt;add('cities', 'collection', array(
            'type' =&gt; 'text',
            'allow_add' =&gt; true,
            'allow_delete' =&gt; true,
            'prototype' =&gt; true,
        ))
      ;
  }
  </code></pre>
  
  <p>My goal is now to be able to add / remove new "addresses" to the form (which is working due to the cookbook entry), BUT for each address, i also want to add / remove cities.</p>
  
  <p>Question:
  When following the example of the symfony page, i should add in the jquery:</p>
  
  <pre><code>/ addresses
  $collectionHolder = $('#ecommerce_user_contact_addresses');
  </code></pre>
  
  <p>the collection holder. For the addresses, i know what to write here because the data-prototype generated in the widget in the view has that id.
  But what should I write here for the inner collection?
  When i write: </p>
  
  <pre><code>// cities
  $collectionHolderCities = $('#ecommerce_user_contact_addresses___name___cities');
  </code></pre>
  
  <p>, which also comes from the data-prototype of the parent div that describes in this case the "cities" element structure", i don't know now how to add / remove new elements of that. </p>
  
  <p>When calling:</p>
  
  <pre><code>var prototype = $collectionHolderCities.data('prototype');
  </code></pre>
  
  <p>in my 'addCityForm(..)' method, the console logs me the variable 'prototype' as undefined. When i logged the prototype in the other method 'addAddressForm', it correctly showed me the prototype structure.</p>
  
  <p>What should i define as collection holder of the "inner collection" for the cities, and what do i need to change in addition to get this working ?</p>
  
  <ul>
  <li>Address (with country name)
  <ul>
  <li>City</li>
  <li>City</li>
  <li>City</li>
  </ul></li>
  <li>Address (with country name)
  <ul>
  <li>City</li>
  <li>City
  ...</li>
  </ul></li>
  </ul>
  
  <p>Regards.</p>
  
  <p><strong>EDIT:</strong>
  I have implemented the js function to add a City now this way, and it is working for the first address that is displayed on document.ready. I don't know if this is the best way to handle it, any other approaches are welcome :)</p>
  
  <p>I get the collection Holder in document.ready with that:</p>
  
  <pre><code> // cities
  $collectionHolderCities = $('#ecommerce_user_contact_addresses_0_cities');
  </code></pre>
  
  <p>Then, in my addCityForm function, i do some replacement to get the newForm right:</p>
  
  <pre><code>function addCityForm($collectionHolderCities, $newLinkCity) {
    // Get the data-prototype explained earlier
    var prototype = $collectionHolderCities.data('prototype');
    // get the new index
    var index = $collectionHolderCities.data('index');
  
    // replace 'cities_0' default value in prototype with 'cities__counter'
    prototype = prototype.replace("cities_0", "cities__counter__");
    prototype = prototype.replace("cities_0", "cities__counter__");
    // replace '0label__' with '__counter__label__'
    prototype = prototype.replace("0label__", "__counter__label__");
    // replace [cities][0] with [cities][__counter__]
    prototype = prototype.replace("[cities][0]", "[cities][__counter__]");
  
  
    // Replace '__counter__' in the prototype's HTML to
    // instead be a number based on how many items we have
    var trans = $('#city-trans').val();
    var newForm = prototype.replace(/__counter__/g,index);
  
    // Replace cities0 (cities + index) with cities_0 (cities + "_" + index)
    newForm = newForm.replace('cities'+index, 'cities_' + index);
    newForm = newForm.replace('cities'+index, 'cities_' + index);
  
    // var repStr = '0label__';
    //newForm = newForm.replace(repStr,  trans + ':');
  
    // increase the index with one for the next item
    $collectionHolderCities.data('index', index + 1);
  
    // Display the form in the page in an li, before the "Add a tag" link li
    var $newFormS = $('&lt;span&gt;&lt;/span&gt;').append(newForm);
    $newLinkCity.before($newFormS);
  
    // add a delete link to the new form
    addCityFormDeleteLink($newFormS);
  } 
  </code></pre>
  
  <p>The problem now is :
  When i add a new 'address', i cannot add cities to this new added address. There is no link or a default city input field. How can i handle that ?</p>
  
  <p>Adding new cities only works for the first address that is displayed on document.ready:</p>
  
  <pre><code>jQuery(document).ready(function() {
  
    // addresses
    $collectionHolder = $('#ecommerce_user_contact_addresses');
  
    // add the "add a tag" anchor and li to the tags ul
    $collectionHolder.append($newLink);
  
    // 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);
  
      $addAddressLink.on('click', function(e) {
      // prevent the link from creating a "#" on the URL
      e.preventDefault();
  
      // add a new tag form (see next code block)
      addAddressForm($collectionHolder, $newLink);
     });
  
    // add blank collections
    addAddressForm($collectionHolder, $newLink);
  
  
    // add city
    // cities
    $collectionHolderCities = $('#ecommerce_user_contact_addresses_0_cities');
  
    // add the "add a tag" anchor and li to the tags ul
    $collectionHolderCities.append($newLinkCity);
  
    // count the current form inputs we have (e.g. 2), use that as the new
    // index when inserting a new item (e.g. 2)
    $collectionHolderCities.data('index',   $collectionHolderCities.find(':input').length);
  
  
  
    $addCityLink.on('click', function(e) {
        // prevent the link from creating a "#" on the URL
        e.preventDefault();
  
        addCityForm($collectionHolderCities, $newLinkCity);
    });
  
    addCityForm($collectionHolderCities, $newLinkCity);
  });
  </code></pre>
  
  <p>The 'addAddressForm()' function is like in the symfony cookbook entry.
  Don't know how to add cities now for added addresses.. :/</p>