Colección de formularios embebidos

Hola a todos,

Voy directo al grano, tengo tres entidades, Shipment, Bag, Content. Estas entidades tienen relaciones UnoAMuchos y lo que quiero es embeber los tres formularios en uno solo. Esto lo he hecho con dos entidades y no he tenido inconveniente pero con tres no me funciona.

Las entidades están bien diseñadas, les dejo los type de las entidades para que se ilustren un poco.

ShipmentType

public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('total_bags')
            ->add('total_weight')
            ->add('total_volume')
            ->add('bags', 'collection', array(
                'type' => new BagType(),
                'by_reference'   => false,
                'allow_delete'   => true,
                'allow_add'      => true,
                'prototype_name' => '__bag_prot__'))
 
        ;
    }

BagType

public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('warehousesCount')
            ->add('piecesSum')
            ->add('weightSum')
            ->add('bag', 'collection', array(
                'type' => ContentType(),
                'by_reference' => false,
                'allow_delete' => true,
                'allow_add' => true))
        ;
    }

ContentType

public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('number')
        ;
    }

En la platilla de twig tengo lo siguiente Shipment/new.html.twig

...
<div class="bags" data-prototype="{% filter escape %}{% include 'AppBundle:Bag:prototype.html.twig' with {'form': form.bags.vars.prototype} %}{% endfilter %}">
...

y dentro del AppBundle:Bag:prototype.html.twig también tengo un prototype:

<ul class="content" data-prototype="{{ form_widget(form.bag.vars.prototype) }}"></ul>

Y el javascript es el siguiente que esta dentro de new.html.twig:

{% block javascripts %}
 
    <script type="text/javascript" charset="utf-8" >
 
        var CollectionHolder = $('div.bags');
        var BagCollectionHolder = $('ul.content');
 
        var $addBagLink = $('<a href="#" class="add_bag_link btn btn-sm btn-success btn-white btn-round"><i class="ace-icon fa fa-times bigger-125"></i>Add Bag</a>');
        var $newLinkLi = $('<div></div>').append($addBagLink);
 
        var $addWhLink = $('<a href="#" class=" btn btn-sm btn-success btn-white btn-round"><i class="ace-icon fa fa-times bigger-125"></i>Add </a>');
        var $newLinkWhLi = $('<li></li>').append($addWhLink);
 
        jQuery(document).ready(function () {
            CollectionHolder.find($('.widget-toolbar')).each(function () {
                addBagFormDeleteLink($(this));
            });
 
            CollectionHolder.append($newLinkLi);
 
            CollectionHolder.data('index', CollectionHolder.find(':input').length);
 
            $addBagLink.on('click', function (e) {
                e.preventDefault();
                addBagForm(CollectionHolder, $newLinkLi);
 
                BagCollectionHolder.append($newLinkWhLi);
            });
 
            BagCollectionHolder.data('index', BagCollectionHolder.find(':input').length);
            $addWhLink.on('click', function (e) {
 
                e.preventDefault();
 
                addBagForm(BagCollectionHolder, $newLinkWhLi);
            });
        });
 
        function addBagForm(collectionHolder, $newLinkLi) {
            var prototype = collectionHolder.data('prototype');
            var index = collectionHolder.data('index');
            var newForm = prototype.replace(/__name__/g, index);
 
            collectionHolder.data('index', index + 1);
 
            var $newFormLi = $('<div></div>').append(newForm);
            $newLinkLi.before($newFormLi);
 
            var $title = index + 1;
 
            CollectionHolder.find('#widget-name-' + index).each(function () {
                $(this).append('<h4 class="widget-title smaller">' + $title + '</h4>');
            });
 
            addBagFormDeleteLink($newFormLi.find('#widget-toolbar-action'), $newFormLi);
        }
 
        function addBagFormDeleteLink($loc, $tagFormLi) {
            var $removeFormA = $('<a href="#" data-action="close"><i class="ace-icon fa fa-times"></i></a>');
            $loc.append($removeFormA);
 
            $removeFormA.on('click', function (e) {
                e.preventDefault();
                $tagFormLi.remove();
            });
        }
    </script>
{% endblock %}

Se me presentan dos problemas, el primero es, como se ve en la imagen, no aparece el botón Add para adicionar content. Y el segundo es que cuando le doy guardar solamente me guarda el último registro, los demás se pierden. Yo se que es demasiado código pero espero que puedan ayudarme, ya estoy desesperado con el tema, gracias.

Captura de pantalla de como se ven los formularios