<ul class="tags" data-prototype="{{ form_widget(form.tags.vars.prototype)|e('html_attr') }}"></ul>

Now add a button just next to the ``<ul>`` to dynamically add a new tag

Now add a button just next to the ``<ul>`` to dynamically add a new tag:

..code-block::html+twig

This example uses `jQuery`_ and assumes you have it included somewhere on your

page (e.g. using Symfony's:doc:`Webpack Encore</frontend>`).

Add a ``script`` tag somewhere on your page so you can start writing some

JavaScript. In this script, bind to the "click" event of the "Add a tag"

button so you can add a new tag form (``addFormToCollection()`` will be show next):

Now add the required functionality with #"diff-a1398eca27c6d36f7c434149d7f582cf8633c231123636c6ac43eb1642989dd9-291-289-0" data-selected="false" role="gridcell" tabindex="-1" valign="top">291

..code-block::javascript

..note::

It is better to separate your JavaScript in real JavaScript files than

to write it inside the HTML as is done here.

Now, each time a user clicks the ``Add a tag`` link, a new sub form will

appear on the page. When the form is submitted, any new tag forms will be converted

into new ``Tag`` objects and added to the ``tags`` property of the ``Task`` object.