即使要创建多个人员，也必须只有一个表单。所以你的表单看起来像这样：

<%= form_for :person, url: person_index_path, method: 'post', id: 'form' do |f| %>
  <div id='new_persons'>
    <input name="persons[][first_name]">
  </div>
<%= f.submit 'Save names' %>
<% end %>
<button id="add">Add a person</button>

请注意文本输入字段的字段名中的括号[]...这是能够将多个人作为阵列提交的关键。
接下来，定义一个用于添加其他人员的模板：

<template id='tmpl'>
  <input name="persons[][first_name]">
</template>

接下来，你需要能够为其他人添加额外的字段，这是由JavaScript完成的：

<script type='text/javascript'>
  const add_button = document.getElementById('add')
  const container = document.getElementById('new_persons')
  const person = document.getElementById('tmpl')

  add_field = ()=>{
    const new_person = person.content.cloneNode(true)
    container.appendChild(new_person)
  }

  add_button.addEventListener("click", add_field);
</script>

因此，每次单击“添加人员”按钮时，另一个first_name字段将添加到表单中。
当你点击“保存名字”时，你将提交一个包含first_names数组的参数散列的表单，如下所示：

"persons"=>[{"first_name"=>"John"}, {"first_name"=>"Paul"}, {"first_name"=>"George"}, {"first_name"=>"Ringo"}]

在控制器中，您可以为收到的数组中的每个成员创建一个新的人！