diff --git a/form/form_collections.rst b/form/form_collections.rst
index b358a4dfbc0..8b34dc700aa 100644
--- a/form/form_collections.rst
+++ b/form/form_collections.rst
@@ -239,23 +239,31 @@ it will receive an *unknown* number of tags. Otherwise, you'll see a
The ``allow_add`` option also makes a ``prototype`` variable available to you.
This "prototype" is a little "template" that contains all the HTML needed to
dynamically create any new "tag" forms with JavaScript. To render the prototype, add
-the following ``data-prototype`` attribute to the existing ``
`` in your template:
+the following ``data-prototype`` attribute to the existing ``
`` in your
+template:
.. code-block:: html+twig
-
+ {# the data-index attribute is required for the JavaScript code below #}
+
-Now add a button just next to the ``
`` to dynamically add a new tag:
+On the rendered page, the result will look something like this:
-.. code-block:: html+twig
+.. code-block:: html
-
+
-On the rendered page, the result will look something like this:
+Now add a button to dynamically add a new tag:
-.. code-block:: html
+.. code-block:: html+twig
-
+
.. seealso::
@@ -265,7 +273,7 @@ On the rendered page, the result will look something like this:
.. tip::
The ``form.tags.vars.prototype`` is a form element that looks and feels just
- like the individual ``form_widget(tag)`` elements inside your ``for`` loop.
+ like the individual ``form_widget(tag.*)`` elements inside your ``for`` loop.
This means that you can call ``form_widget()``, ``form_row()`` or ``form_label()``
on it. You could even choose to render only one of its fields (e.g. the
``name`` field):
@@ -281,16 +289,16 @@ On the rendered page, the result will look something like this:
and you need to adjust the following JavaScript accordingly.
Now add some JavaScript to read this attribute and dynamically add new tag forms
-when the user clicks the "Add a tag" link.
-
-Add a ``