How to put in tabs the nested form?

Question

I have model CustomerBio and CustomerBioDetail. The details have different category.

CustomerBio model has_many CustomerBioDetails

CustomerBioDetail belongs_to CustomerBio

    <%= simple_form_for @customer_bio, :remote => true do |f| %>
        ...
        <%= f.simple_fields_for :customer_bio_details, :wrapper => false do |p| %>
            <%= render 'customer_bio_detail_fields', {p: p} %>
        <% end %>   

        <%= f.submit 'Save', class: "btn btn-primary" %>
    <% end %>

How I will put my nested into tabs by its category.

sample table:

CustomerBio

---

ID: 1
Name: Sample Question 1

---

CustomerBioDetail

---

ID: 1
customer_bio_id: 1
name: Full Name
category_id: 1

---

ID: 2
customer_bio_id: 1
name: Age
category_id: 1

---

ID: 3
customer_bio_id: 1
name: Company
category_id: 2

---

ID: 4
customer_bio_id: 1
name: Position
category_id: 2

So I will have 2 tabs for this

Answer 1

I didn't tried it myself, but this should work for you:

<%= simple_form_for @customer_bio do |f| %>
  ...
  <% @customer_bio.customer_bio_details.group_by(&:category).each do |category, details| %>
    <div class="tab">
      <h3 class="tab-title"><%= category.name %></h3>
      <%= f.simple_fields_for details do |p| %>
        ...
      <% end %>
    </div>
  <% end %>

  <%= f.submit 'Save', class: "btn btn-primary" %>
<% end %>