Nested form not properly generate - ruby-on-rails

Question

Webpage
-> Sections (Has Many)
-> Header (Has One)
-> HeaderTabs (Has Many)
I make nested form for above structure and it's display me properly,
But When I'm adding new header_tabs on click of 'Add new Header Tab', It's add new fields but the indexing value is same as first one.
<div class="header_tabs_forms">
<div class="form-group">
<label class="control-label col-lg-3"> </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"> </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>
check - webpage[section_headers_attributes][0][header_attributes][header_tabs_attributes][0]
the index value [header_tabs_attributes][0] are same for tabs.
Can you please why is it same ? and what is the solutions ?
Update 2 - Code for the form.
<%= 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"> </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 %>