symfony collection prototype

FormType.php

..

->add('syncJobGroovyScripts', CollectionType::class, [
  'entry_type' => GroovyScriptType::class,
  'allow_add'    => true,
  'by_reference' => false,
  'allow_delete' => true,
])

...

view.html.twig

...

{% for child in form %}
    {% if child.vars.value is iterable %}
        <div id="{{ child.vars.id }}" data-prototype="{{ form_widget(child.vars.prototype)|e('html_attr') }}">
            {{ form_label(child) }}
            {% for sub in child.children %}
                <div class="well">
                    {% for subchild in sub %}
                        {{ form_row(subchild) }}
                    {% endfor %}
                </div>
            {% endfor %}
        </div>
        <br>
    {% else %}
        {{ form_row(child) }}
    {% endif %}
{% endfor %}

...

...

<script>
    function addTagFormDeleteLink($tagFormLi) {
        var $removeFormA = $('<a href="#" class="btn btn-xs btn-danger pull-right"><i class="fa fa-fw fa-trash"></i></a>');
        //console.log($tagFormLi);
        //console.log($removeFormA);
        $tagFormLi.prepend($removeFormA);

        $removeFormA.on('click', function(e) {
            // prevent the link from creating a "#" on the URL
            e.preventDefault();

            // remove the li for the tag form
            $tagFormLi.remove();
        });
    }
</script>

<script>
{% for child in form if child.vars.value is iterable %}

    var $collectionHolder_{{ child.vars.name }};

    var $addScriptLink_{{ child.vars.name }} = $('<a href="#" class="btn btn-xs btn-primary add_script_link"><i class="fa fa-fw fa-plus"></i> {{ child.vars.name }}</a>');
    var $newScript_{{ child.vars.name }} = $addScriptLink_{{ child.vars.name }};

    jQuery(document).ready(function() {
        // Get the ul that holds the collection of tags
        $collectionHolder_{{ child.vars.name }} = $('#{{ child.vars.id }}');

        // add the "add a tag" anchor and li to the tags ul
        $collectionHolder_{{ child.vars.name }}.append($newScript_{{ child.vars.name }});

        // add a delete link to all of the existing tag form li elements
        $collectionHolder_{{ child.vars.name }}.find('.well').each(function() {
            addTagFormDeleteLink($(this));
        });

        // 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_{{ child.vars.name }}.data('index', $collectionHolder_{{ child.vars.name }}.find(':input').length);

        $addScriptLink_{{ child.vars.name }}.on('click', function(e) {
            // prevent the link from creating a "#" on the URL
            e.preventDefault();

            // add a new tag form (see next code block)
            addScriptForm_{{ child.vars.name }}($collectionHolder_{{ child.vars.name }}, $newScript_{{ child.vars.name }});

        });
    });

    function addScriptForm_{{ child.vars.name }}($collectionHolder, $newLinkLi) {

        console.log($collectionHolder);

        // 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 tag" link li
        var $newFormLi = newForm;
        $newLinkLi.before('<div class="well"><div>'+$newFormLi+'</div></div>');

        var index = $('#{{ child.vars.id }} > .well:last').index();

        addTagFormDeleteLink($('#{{ child.vars.id }} > div').eq(index-1));
    }
{% endfor %}
</script>