Render nested form in bootstrap tab

Question

Working on Rails 5, I am trying to render nested form (same model) in each dynamic tab, but now the same fomr is rendering in the all the tabs,how to render different fieldset in different tabs

views/material_masters/new.html.erb

<div class="col-md-12">
   <div class="panel panel-default">
     <div class="panel-body">
      <div class="tabbable-line">
        <ul class="nav nav-tabs ">
          <% @part_locations.each.with_index do |l, i| %>
          <li <%= 'class="active"' if i == 0 %>>
            <a href="#<%= l.location_name %>" data-toggle="tab"> <%= l.location_name %> </a>
          </li>
          <% end %>
          <li><button type="button" class="fa fa-plus btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal"></button> </li>
        </ul>
        <div class="tab-content">
          <% @part_locations.each.with_index do |l, i| %>
          <div class="tab-pane <%= 'active' if  i == 0 %>" id="<%= l.location_name %>">
            <%= f.fields_for :material_locations do |builder| %>
            <%= render 'material_location_fields', :f => builder  %>
            <% end %>
            <%= link_to_add_association "Add", f, :material_locations, class: "btn btn-primary btn-xs"  %>
          </div>
          <% end %>
        </div>
      </div>

    </div>
  </div>
</div>

views/material_masters/_material_location_fields.html.erb

<fieldset>
  <div class= "nested-fields">
    <div class="col-sm-3">
      <%= f.label :material_location, "Material Location" %>
      <%= f.text_field :mat_location,class:"form-control",required: true %>
    </div>
    <div class="col-sm-3">
      <%= f.label :opening_stock  %>
      <%= f.text_field :opening_stock ,class:"form-control",onKeyPress:"return NumbersOnly(this, event,true)",required: true  %>
    </div>
    <div class="col-sm-3">
      <%= f.label :reorder_qty %>
      <%= f.text_field :reorder_qty, class:"form-control",onKeyPress:"return NumbersOnly(this, event,true)",required:true  %>
    </div>
  </div>
</fieldset>

model/material_master.rb

class MaterialMaster < ApplicationRecord
   has_many :material_locations
   accepts_nested_attributes_for :material_locations,allow_destroy: true
 end

https://i.stack.imgur.com/b6Ssr.png

https://i.stack.imgur.com/69h3X.png

Hear i am trying to add location in bangalore tab i am addling mumbai location and in delhi tab i want to add one more material location but the same form is coming in the next tab

Answer 1

What is obviously on your code is that you have space here in a line:

<a href="#<%= l  .location_name %>" data-toggle="tab"> <%= l.location_name %> </a>

as you can note l .location_name can you remove the space?