@@ -243,7 +243,7 @@ the following ``data-prototype`` attribute to the existing ``<ul>`` in your temp
243243
244244..code-block ::html+twig
245245
246- <ul data-prototype="{{ form_widget(form.tags.vars.prototype)|e('html_attr') }}"></ul>
246+ <ul data-index="{{ form.tags|length > 0 ? form.tags|last.vars.name + 1 : 0 }}" data- prototype="{{ form_widget(form.tags.vars.prototype)|e('html_attr') }}"></ul>
247247
248248Now add a button just next to the ``<ul> `` to dynamically add a new tag:
249249
@@ -255,7 +255,7 @@ On the rendered page, the result will look something like this:
255255
256256..code-block ::html
257257
258- <ul class =" tags" data-index =" {{ form.tags|length > 0 ? form.tags|last.vars.name + 1 : 0 }} " data-prototype =" < ; div> ;< ; label class=" ; required" ;> ; __name__< ; /label> ;< ; div id=" ; task_tags___name__" ;> ;< ; div> ;< ; label for=" ; task_tags___name___name" ; class=" ; required" ;> ; Name< ; /label> ;< ; input type=" ; text" ; id=" ; task_tags___name___name" ; name=" ; task[tags][__name__][name]" ; required=" ; required" ; maxlength=" ; 255" ; /> ;< ; /div> ;< ; /div> ;< ; /div> ; "
258+ <ul class =" tags" data-index =" 0 " data-prototype =" < ; div> ;< ; label class=" ; required" ;> ; __name__< ; /label> ;< ; div id=" ; task_tags___name__" ;> ;< ; div> ;< ; label for=" ; task_tags___name___name" ; class=" ; required" ;> ; Name< ; /label> ;< ; input type=" ; text" ; id=" ; task_tags___name___name" ; name=" ; task[tags][__name__][name]" ; required=" ; required" ; maxlength=" ; 255" ; /> ;< ; /div> ;< ; /div> ;< ; /div> ; "
259259
260260..seealso ::
261261
@@ -537,7 +537,7 @@ First, add a "delete this tag" link to each tag form:
537537 })
538538
539539// ... the rest of the block from above
540-
540+
541541function addFormToCollection () {
542542// ...
543543
@@ -553,7 +553,7 @@ The ``addTagFormDeleteLink()`` function will look something like this:
553553const removeFormButton = document .createElement (' button'
554554removeFormButton .classList
555555removeFormButton .innerText = ' Delete this tag'
556-
556+
557557tagFormLi .append (removeFormButton);
558558
559559removeFormButton .addEventListener (' click' e )=> {