Fix person form UX issues

app/assets/javascripts/people.js

@@ -13,8 +13,21 @@ const People = {
         // Replace the placeholder index with the actual index
         newForm = $(newForm.replace(/replace-me/g, index + 1));
         newForm.appendTo(list);
-        const nameInput = newForm.find('.person-name');
-        const orcidInput = newForm.find('.person-orcid');
+
+        People.bind(newForm);
+
+        return newForm;
+    },
+
+    delete: function () {
+        $(this).parents('.person-form').fadeOut('fast', function() {
+            $(this).remove();
+        });
+    },
+
+    bind: function (element) {
+        const nameInput = element.find('.person-name');
+        const orcidInput = element.find('.person-orcid');
         const opts = {
             orientation: 'top',
             triggerSelectOnValidInput: false,
@@ -32,19 +45,11 @@ const People = {
             formatResult: Autocompleters.formatResultWithHint
         }
 
-        opts.serviceUrl = list.parents('[data-role="people-form"]').data('autocompleteUrl');
+        opts.serviceUrl = element.parents('[data-role="people-form"]').data('autocompleteUrl');
         opts.dataType = 'json';
         opts.deferRequestBy = 100;
 
         nameInput.autocomplete(opts);
-
-        return newForm;
-    },
-
-    delete: function () {
-        $(this).parents('.person-form').fadeOut('fast', function() {
-            $(this).remove();
-        });
     },
 
     init: function () {
@@ -70,8 +75,14 @@ const People = {
                     nextItem.find('input.form-control:first').focus();
                 }
             });
+
+            // Set up autocomplete on any existing fields
+            form.find('.person-form').each(function (node) {
+                People.bind($(this));
+            });
+
+            $(form).on('change', '.delete-person-btn input.destroy-attribute', People.delete);
         });
 
-        $('.delete-person-btn input.destroy-attribute').change(People.delete);
     }
 };

app/views/common/_people_form.html.erb

@@ -20,9 +20,10 @@
   <input type="hidden" name="<%= "#{model_name}[#{field_name}][0]" -%>" value=""/>
 
   <div data-role="people-form-list">
+    <% id_offset = Person.maximum(:id) || 0 # Prevent collision with real IDs %>
     <% f.object.send(field_name).each_with_index do |person, index| %>
       <%= render partial: 'common/person_form',
-                 locals: { field_prefix: "#{model_name}[#{field_name}]", index: person.id, person: person, role: role } %>
+                 locals: { field_prefix: "#{model_name}[#{field_name}]", index: person.id || (index + id_offset + 1), person: person, role: role } %>
     <% end %>
   </div>