Adding Stimulus code

See #17355 (comment)

* Please add a link to https://symfony.com/doc/current/frontend/encore/simple-example.html#stimulus-symfony-ux - this syntax is still a miracle to me...
* The *general* explanation is so intertwined with JavaScript, that a "clean" separation doesn't work - Stimulus users will still need to read the Vanilla JS approach to understand what's going on.

Please merge this first, then I'll add the same down at the "Allowing Tags to be Removed" section.

Author: ThomasLandauer

form/form_collections.rst

@@ -238,7 +238,11 @@ 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
+dynamically create any new "tag" forms with JavaScript.
+
+Let's start with plain JavaScript (Vanilla JS) – if you're using Stimulus, see below.
+
+To render the prototype, add
 the following ``data-prototype`` attribute to the existing ``<ul>`` in your
 template:
 
@@ -334,6 +338,49 @@ into new ``Tag`` objects and added to the ``tags`` property of the ``Task`` obje
 
     You can find a working example in this `JSFiddle`_.
 
+JavaScript with Stimulus
+~~~~~~~~~~~~~~~~~~~~~~~~
+
+If you're using Stimulus, wrap everything in a ``<div>``:
+
+.. code-block:: html+twig
+
+    <div data-controller="form-collection"
+        data-form-collection-index-value="{{ form.tags|length > 0 ? form.tags|last.vars.name + 1 : 0 }}"
+        data-form-collection-prototype-value="{{ form_widget(form.tags.vars.prototype)|e('html_attr') }}"
+    >
+        <ul data-form-collection-target="collectionContainer"></ul>
+        <button type="button" data-action="form-collection#addCollectionElement">Add a tag</button>
+    </div>
+
+Then create the controller:
+
+.. code-block:: javascript
+
+    // assets/controllers/form-collection_controller.js
+    
+    import { Controller } from '@hotwired/stimulus';
+
+    export default class extends Controller {
+        static targets = ["collectionContainer"]
+
+        static values = {
+            index    : Number,
+            prototype: String,
+        }
+
+        addCollectionElement(event)
+        {
+            const item = document.createElement('li');
+            item.innerHTML = this.prototypeValue.replace(/__name__/g, this.indexValue);
+            this.collectionContainerTarget.appendChild(item);
+            this.indexValue++;           
+        }
+    }
+
+Handling the new Tags in PHP
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
 To make handling these new tags easier, add an "adder" and a "remover" method
 for the tags in the ``Task`` class::