diff --git a/src/bundle/Resources/public/js/scripts/admin.contenttype.selection.js b/src/bundle/Resources/public/js/scripts/admin.contenttype.selection.js
index 47b90c4f53..6ee9b7af60 100644
--- a/src/bundle/Resources/public/js/scripts/admin.contenttype.selection.js
+++ b/src/bundle/Resources/public/js/scripts/admin.contenttype.selection.js
@@ -7,7 +7,6 @@
     const NUMBER_PLACEHOLDER = /__number__/g;
 
     [...doc.querySelectorAll('.ezselection-settings.options')].forEach(container => {
-        const countExistingOptions = () => container.querySelectorAll(SELECTOR_OPTION).length;
         const findCheckedOptions = () => [...container.querySelectorAll('.ezselection-settings-option-checkbox:checked')];
         const toggleDisableState = () => {
             const disabledState = !!findCheckedOptions().length;
@@ -17,10 +16,11 @@
         };
         const addOption = () => {
             const template = container.querySelector(SELECTOR_TEMPLATE).innerHTML;
+            const optionsList = container.querySelector(SELECTOR_OPTIONS_LIST);
+            const nextId = parseInt(optionsList.dataset.nextOptionId, 10);
 
-            container
-                .querySelector(SELECTOR_OPTIONS_LIST)
-                .insertAdjacentHTML('beforeend', template.replace(NUMBER_PLACEHOLDER, countExistingOptions()));
+            optionsList.dataset.nextOptionId = nextId + 1;
+            optionsList.insertAdjacentHTML('beforeend', template.replace(NUMBER_PLACEHOLDER, nextId));
         };
         const removeOptions = () => {
             findCheckedOptions().forEach(element => element.closest(SELECTOR_OPTION).remove());
diff --git a/src/bundle/Resources/views/admin/content_type/field_types.html.twig b/src/bundle/Resources/views/admin/content_type/field_types.html.twig
index 51f9fa9c0d..fdbdc15702 100644
--- a/src/bundle/Resources/views/admin/content_type/field_types.html.twig
+++ b/src/bundle/Resources/views/admin/content_type/field_types.html.twig
@@ -204,7 +204,8 @@
         {{ form_errors(form.options) }}
         <ul
             class="ezselection-settings-option-list ez-selection-table list-unstyled"
-            data-selection-buttons=".ezselection-settings-option-remove">
+            data-selection-buttons=".ezselection-settings-option-remove"
+            data-next-option-id="{{ form.options.vars.value is empty ? 0 : max(form.options.vars.value|keys) + 1 }}">
             {% for option in form.options %}
                 <li class="ezselection-settings-option-value ez-selection-table-row mb-2 d-flex align-items-center">
                     <input