Symfony ColletionType add button (using jQuery)

collection-type-add-button-basic-example.css

div[data-prototype] {
  & > .form-group {
    margin-bottom: 10px;
    & > div {
      width: 75%;
      display: inline-block;
    }
    .form-group {
      width: 49%;
      display: inline-block;
      margin-bottom: 0px;
      label {
        display: none;
      }
    }
    &:first-child .form-group label {
      display: block;
    }
  }
  button {
    padding: 6px;
    .fas {
      width: 20px;
    }
  }
}

collection-type-add-button.js

jQuery(document).ready(function () {
    var wrapper  = jQuery('[data-prototype]');

    var addButtonTemplate = wrapper.attr('data-add-button-template');
    if (typeof(addButtonTemplate) === 'undefined') {
        addButtonTemplate = '<button type="button">+</button>';
    }

    var removeButtonTemplate = wrapper.attr('data-remove-button-template');
    if (typeof(removeButtonTemplate) === 'undefined') {
        removeButtonTemplate = '<button type="button">-</button>';
    }

    var list = jQuery('#'+wrapper.attr('id')+' > .form-group ');

    var appendRemoveButton = function(element, template) {
        var removeButton = jQuery(template);
        removeButton.appendTo(element);
        removeButton.on('click', function(event) {
            jQuery(this).parent('.form-group').remove();
        });
    };

    for (let index = 0; index < list.length; index++) {
        appendRemoveButton(list[index], removeButtonTemplate);
    }

    var data = {
        'wrapper': wrapper,
        'list': list,
        'appendRemoveButton': appendRemoveButton,
        'removeButtonTemplate': removeButtonTemplate
    };

    var addButton = jQuery(addButtonTemplate);
    wrapper.append(addButton);

    jQuery(addButton).bind('click', data, function (event) {
        var wrapper   = event.data.wrapper;
        var list      = event.data.list;
        var counter   = wrapper.data('widget-counter') | list.length;
        var newWidget = wrapper.attr('data-prototype');
        newWidget     = jQuery(newWidget.replace(/__name__/g, counter));

        counter++;
        wrapper.data('widget-counter', counter);

        event.data.appendRemoveButton(newWidget, event.data.removeButtonTemplate);

        newWidget.insertBefore(this);
    });
});

FormFieldType.php

<?php

declare(strict_types=1);

/*
 * This file is part of the VaultUtilities package.
 * (c) Connect Holland.
 */

namespace ConnectHolland\VaultUtilities\Form\Type;

use use Symfony\Component\Form\Extension\Core\Type\CollectionType;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use App\Form\Type\EntryType;

class FormFieldType extends AbstractType
{
    /**
     * {@inheritdoc}
     */
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('additional', CollectionType::class, [
                'entry_type' => EntryType::class,
                'entry_options' => [
                    'label'       => false,
                ],
                'delete_empty' => function ($data) {
                    return is_null($data);
                },
                'allow_delete' => true,
                'attr'         => [
                    'data-add-button-template'    => '<button type="button" class="btn"><i class="fas fa-plus"></i> </button>',
                    'data-remove-button-template' => '<button type="button" class="btn"><i class="fas fa-minus"></i> </button>',
                ],
            ])
        ;
    }
}