Cocoon gem inside a table in rails

I'm busy with a invoicing application and i'm trying to put a nested form from the cocoon gem inside a <tbody></tbody>. The nested form is working perfectly but it doesn't show up in the <tbody></tbody> but at some random place above the table head. I think it's because you can't have <div class=nested-fields></div> inside the table body but i'm not sure how to do it differently.

i have this in my invoices/_form.html.erb :

    <div class="row">
      <div class="col-sm-12">
        <table class="table table-striped">
          <thead>
          <tr>
            <th class="hidden-480"> Hoeveelheid </th>
            <th class="hidden-480"> Beschrijving </th>
            <th class="hidden-480"> Bedrag </th>
            <th class="hidden-480"> Totaal </th>
            <th class="hidden-480"> Btw(%) </th>
          </tr>
          </thead>
          <tbody>
            <%= f.fields_for :products do |product| %>
            <%= render 'product_fields', f: product %>
            <%= link_to_add_association 'Item toevoegen', f, :products, class: 'btn btn-primary btn-success' %>
            <% end %>
          </tbody>
        </table>
      </div>
    </div>

invoices/_product_fields.html.erb

<div class="nested-fields">
    <tr>
      <td> <%= f.text_field :quantity %> </td>
      <td> <%= f.text_area :description %> </td>
      <td> <%= f.number_field :unitprice %> </td>
      <td> €200  </td>
      <td> <%= f.select(:btw, [[' 21%', 21, title: '21%'],[' 6%', 6, title: '6%'], [' 0%', 0, title: '0%']]) %> </td>
    </tr>
  <%= link_to_remove_association 'x', f, class: 'btn btn-primary btn-danger' %>
</div>

Any idea what's going on? Help would be much appreciated!