IceCold/templates/fridge/single.html.twig

{% extends "base/base.html.twig" %}

{% block body %}
    {{ form(form) }}
    <button type="button" class="btn btn-primary add_item_link" data-collection-holder-id="fridge_productLines">Add product</button>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
      const addFormToCollection = (e) => {
        const collectionHolder = document.querySelector('#' + e.currentTarget.dataset.collectionHolderId);
        console.log(collectionHolder);

        const item = document.createElement('div');

        item.innerHTML = collectionHolder
            .dataset
            .prototype
            .replace(
                /__name__label__/g,
                collectionHolder.children.length
            )
            .replace(
                /__name__/g,
                collectionHolder.children.length
            );

        collectionHolder.appendChild(item);
      };

      document
          .querySelectorAll('.add_item_link')
          .forEach(btn => btn.addEventListener("click", addFormToCollection));
    </script>
{% endblock %}