Allow creatig FridgeProductLine from fridge form

templates/base/base.html.twig

@@ -28,6 +28,10 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
             integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
             crossorigin="anonymous"></script>
+    <script
+            src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
+            integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
+            crossorigin="anonymous"></script>
 {#    {{ encore_entry_script_tags('app') }}#}
 {% endblock %}
 </body>

templates/fridge/single.html.twig

@@ -2,4 +2,35 @@
 
 {% 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 %}