From 907703b0c56edc3928028c5565fa6b8f1f3470ab Mon Sep 17 00:00:00 2001
From: Mathieu Santostefano <msantostefano@jolicode.com>
Date: Fri, 1 Feb 2019 10:32:00 +0100
Subject: [PATCH] Improve add to collection JS exemple

- Improve `data-*` attributes naming (more precise)
- Add missing `data-widget-counter` in Twig code block
---
 reference/forms/types/collection.rst | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/reference/forms/types/collection.rst b/reference/forms/types/collection.rst
index 63e02bc66be..e451791be51 100644
--- a/reference/forms/types/collection.rst
+++ b/reference/forms/types/collection.rst
@@ -149,7 +149,7 @@ you need is this JavaScript code:
     // add-collection-widget.js
     jQuery(document).ready(function () {
         jQuery('.add-another-collection-widget').click(function (e) {
-            var list = jQuery(jQuery(this).attr('data-list'));
+            var list = jQuery(jQuery(this).attr('data-list-selector'));
             // Try to find the counter of the list or use the length of the list
             var counter = list.data('widget-counter') | list.children().length;
 
@@ -180,7 +180,8 @@ And update the template as follows:
         {# store the prototype on the data-prototype attribute #}
         <ul id="email-fields-list"
             data-prototype="{{ form_widget(form.emails.vars.prototype)|e }}"
-            data-widget-tags="{{ '<li></li>'|e }}">
+            data-widget-tags="{{ '<li></li>'|e }}"
+            data-widget-counter="{{ form.children|length }}">
         {% for emailField in form.emails %}
             <li>
                 {{ form_errors(emailField) }}
@@ -191,7 +192,7 @@ And update the template as follows:
 
         <button type="button"
             class="add-another-collection-widget"
-            data-list="#email-fields-list">Add another email</button>
+            data-list-selector="#email-fields-list">Add another email</button>
 
         {# ... #}
     {{ form_end(form) }}