嵌套表单未正确生成

Question

Webpage
 -> Sections (Has Many)
    -> Header (Has One)
       -> HeaderTabs (Has Many)

我为上面的结构制作了嵌套表格，它正确显示我， 但是，当我点击“添加新标题标签”时添加新的header_tabs时，它会添加新字段，但索引值与第一个相同。

<div class="header_tabs_forms">
    <div class="form-group">
        <label class="control-label col-lg-3">&nbsp;</label>
    <div class="col-lg-1">
        <input type="hidden" value="false" name="webpage[section_headers_attributes][0][header_attributes][header_tabs_attributes][0][_destroy]" id="webpage_section_headers_attributes_0_header_attributes_header_tabs_attributes_0__destroy"><a class="btn btn-danger btn-xs rmhdrtab remove_nested_fields" data-association="header_tabs" href="javascript:void(0)"><i class="fa fa-close"></i></a>
    </div>
    <div class="col-lg-6 header_tabs">
        <input placeholder="Write Tab Name" class="form-control form-ctr100 required" require="true" style="width:100%;" type="text" name="webpage[section_headers_attributes][0][header_attributes][header_tabs_attributes][0][tab_name]" id="webpage_section_headers_attributes_0_header_attributes_header_tabs_attributes_0_tab_name">
        <div class="error"></div>
    </div>
    <div class="col-lg-2 header_tabs">
        <input class="form-control form-ctr2 required" min="1" require="true" type="text" value="1" name="webpage[section_headers_attributes][0][header_attributes][header_tabs_attributes][0][position]" id="webpage_section_headers_attributes_0_header_attributes_header_tabs_attributes_0_position">
    </div>
  </div>
    <div class="form-group">
        <label class="control-label col-lg-3">&nbsp;</label>
    <div class="col-lg-1">
        <input type="hidden" value="false" name="webpage[section_headers_attributes][0][header_attributes][header_tabs_attributes][0][_destroy]" id="webpage_section_headers_attributes_0_header_attributes_header_tabs_attributes_0_header_tabs__destroy"><a class="btn btn-danger btn-xs rmhdrtab remove_nested_fields" data-association="header_tabs" href="javascript:void(0)"><i class="fa fa-close"></i></a>
    </div>
    <div class="col-lg-6 header_tabs">
        <input placeholder="Write Tab Name" class="form-control form-ctr100 required" require="true" style="width:100%;" type="text" name="webpage[section_headers_attributes][0][header_attributes][header_tabs_attributes][0][tab_name]" id="webpage_section_headers_attributes_0_header_attributes_header_tabs_attributes_0_header_tabs_tab_name">
        <div class="error"></div>
    </div>
    <div class="col-lg-2 header_tabs">
        <input class="form-control form-ctr2 required" min="1" require="true" type="text" value="1" name="webpage[section_headers_attributes][0][header_attributes][header_tabs_attributes][0][position]" id="webpage_section_headers_attributes_0_header_attributes_header_tabs_attributes_0_header_tabs_position">
    </div>
  </div>
</div>

检查 - 网页[section_headers_attributes] [0] [header_attributes] [header_tabs_attributes] [0]

标签的索引值[header_tabs_attributes] [0]相同。

你能问为什么一样吗？什么是解决方案？

更新2 - 表单代码。

          <%= nested_form_for webpage, html: {class: 'form-horizontal header-validation-webpage'}, remote: true do |form_webpage| %>
              <%= hidden_field_tag :type, params[:type] %>
              <%= form_webpage.fields_for :sections do |form_section| %>

                            <div class="form-group">
                                <%= form_section.label :name, class: 'control-label col-lg-3' %>
                                <div class="col-lg-8">              
                                    <%= form_section.text_field :name, placeholder: 'Write your section name!', class: 'form-control' %>
                                </div>
                            </div>

                            <div class="form-group">
                                <%= form_section.label :position, class: 'control-label col-lg-3' %>
                                <div class="col-lg-8">
                                    <%= form_section.number_field :position, placeholder: 'Position', class: 'form-control', min: 1 %>
                                </div>
                            </div>

                <%= form_section.fields_for :header do |form_header| %>
                                <legend><small>Tab Name & Position Detail</small></legend>
                    <div class="header_tabs_forms">
                    <%= form_header.fields_for :header_tabs, :wrapper => false do |form_htab| %>                        
                        <%# index = Time.now().strftime("%d%m%Y%I%M%S%3N") %>
                                    <div class="form-group">
                                        <label class="control-label col-lg-3">&nbsp;</label>
                                    <div class="col-lg-1">
                                        <%= form_htab.link_to_remove "<i class='fa fa-close'></i>".html_safe, class: 'btn btn-danger btn-xs rmhdrtab' %>
                                    </div>
                                    <div class="col-lg-6 header_tabs">
                                        <%= form_htab.text_field :tab_name, placeholder: 'Write Tab Name', class: 'form-control form-ctr100 required', require: true, style: 'width:100%;' %>
                                        <div class='error'><%= display_error_messages webpage.errors, [:'header.header_tabs.tab_name'] %></div>
                                    </div>
                                    <div class="col-lg-2 header_tabs">
                                        <%= form_htab.text_field :position, class: 'form-control form-ctr2 required', min: 1, require: true %>
                                    </div>
                                  </div>
                    <% end %>
                    </div>
                    <p class="text-right">
                        <%= form_header.link_to_add "<i class='fa fa-plus'></i> Add New Tab".html_safe, :header_tabs, data: {target: '.header_tabs_forms'} %>
                    </p>
                <% end %>
              <% end %>
                      <hr>
                      <div class="form-group"> 
                        <div class="col-lg-offset-3 col-lg-9">
                            <%= form_webpage.submit 'Save', class: 'btn btn-primary', data: {disable_with: 'Loading...'} %>
                        </div>
                      </div>  
          <% end %>