diff --git a/src/Sylius/Bundle/WebBundle/Resources/public/js/form-collection.js b/src/Sylius/Bundle/WebBundle/Resources/public/js/form-collection.js
index e753780a0c7..ab05c43854e 100644
--- a/src/Sylius/Bundle/WebBundle/Resources/public/js/form-collection.js
+++ b/src/Sylius/Bundle/WebBundle/Resources/public/js/form-collection.js
@@ -15,10 +15,18 @@
         $(document).on('click', 'a[data-collection-button="add"]', function(e) {
             e.preventDefault();
             var collectionContainer = $('#' + $(this).data('collection'));
-            collectionContainer.children('.no-data').remove();
-            var isArray = collectionContainer.data('is-php-array');
+            collectionContainer.find('.remove-on-collection-add').remove();
             var prototype = $('#' + $(this).data('prototype')).data('prototype');
-            var item = prototype.replace(/__name__/g, collectionContainer.children().length + (undefined == isArray ? 0 : 1));
+
+            // Check if an element with this ID already exists.
+            // If it does, increase the count by one and try again
+            var id = prototype.match(/input.*?id="(.*?)"/);
+            var count = 0;
+            while ($('#' + id[1].replace(/__name__/g, count)).length > 0) {
+                count++;
+            }
+
+            var item = prototype.replace(/__name__/g, count);
             collectionContainer.append(item);
         });
 
diff --git a/src/Sylius/Bundle/WebBundle/Resources/views/Backend/Product/Form/_volume_based_config.html.twig b/src/Sylius/Bundle/WebBundle/Resources/views/Backend/Product/Form/_volume_based_config.html.twig
index 21ba071079e..036710c35fe 100644
--- a/src/Sylius/Bundle/WebBundle/Resources/views/Backend/Product/Form/_volume_based_config.html.twig
+++ b/src/Sylius/Bundle/WebBundle/Resources/views/Backend/Product/Form/_volume_based_config.html.twig
@@ -30,7 +30,7 @@
         </tr>
         </thead>
         <tbody id="sylius-assortment-product-pricing-ranks" class="collection-container"
-               data-prototype="{{ _self.volume_based_prototype(form)|e }}" data-is-php-array="true">
+               data-prototype="{{ _self.volume_based_prototype(form)|e }}">
         {% for rank in form.masterVariant.pricingConfiguration.children %}
             <tr class="sylius-assortment-product-pricing-ranks-item">
                 <td>{{ form_widget(rank.children.min) }}</td>
@@ -39,7 +39,7 @@
                 <td>{{ _self.volume_based_delete() }}</td>
             </tr>
         {% else %}
-            <tr class="no-data">
+            <tr class="remove-on-collection-add">
                 <td colspan="4">{{ "sylius.pricing.volume_based.no_results"|trans }}</td>
             </tr>
         {% endfor %}
diff --git a/src/Sylius/Bundle/WebBundle/Resources/views/Backend/ProductVariant/Form/_volume_based_config.html.twig b/src/Sylius/Bundle/WebBundle/Resources/views/Backend/ProductVariant/Form/_volume_based_config.html.twig
index d8bd0f53927..1c49f8b4005 100644
--- a/src/Sylius/Bundle/WebBundle/Resources/views/Backend/ProductVariant/Form/_volume_based_config.html.twig
+++ b/src/Sylius/Bundle/WebBundle/Resources/views/Backend/ProductVariant/Form/_volume_based_config.html.twig
@@ -30,7 +30,7 @@
         </tr>
         </thead>
         <tbody id="sylius-assortment-product-pricing-ranks" class="collection-container"
-               data-prototype="{{ _self.volume_based_prototype(form)|e }}" data-is-php-array="true">
+               data-prototype="{{ _self.volume_based_prototype(form)|e }}">
         {% for rank in form.pricingConfiguration.children %}
             <tr class="sylius-assortment-product-pricing-ranks-item">
                 <td>{{ form_widget(rank.children.min) }}</td>
@@ -39,7 +39,7 @@
                 <td>{{ _self.volume_based_delete() }}</td>
             </tr>
         {% else %}
-            <tr class="no-data">
+            <tr class="remove-on-collection-add">
                 <td colspan="4">{{ "sylius.pricing.volume_based.no_results"|trans }}</td>
             </tr>
         {% endfor %}