Rails 4 & cocoon gem: Cannot add 3rd level child t

I am currently using the cocoon gem to handle my nested form along with bootstrap/simple_form. My models are laid out like this:

A Contact has_many goals
A Goal has_many tasks
A Task has_one reminder (not yet implemented, this is next once I resolve this issue)

My form is laid out with the Goal fields being built correctly, and I can add/remove tasks to my first Goal without a problem. However, when I dynamically add another Goal (regardless if it's in the new or edit action), I cannot add/remove tasks to it (if I click 'add task', it only gets added to my first Goal). Below are my forms:

_form.html.erb

<%= simple_form_for(@contact) do |f| %>

  <% if @contact.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@contact.errors.count, "error") %> prohibited this contact from being saved:</h2>
      <ul>
      <% @contact.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <%= f.input :name %>
  <%= f.input :title %>
  <%= f.input :company %>
  <%= f.input :email %>
  <%= f.input :notes %>

  <h3>Goals:</h3>
  <div id="goals">
    <%= f.simple_fields_for(:goals) do |goal| %>
    <%= render 'goal_fields', :f => goal %>
      <div class="links">
        <%= link_to_add_association 'add goal', f, :goals, :render_options => {:wrapper => 'bootstrap' } %>
      </div>
    <% end %>
  </div>

  <%= f.submit :submit %>

<% end %>

_goal_fields.html.erb

<div class="nested-fields">

  <%= f.input :title %>
  <%= f.input :due_date %>
  <%= f.input :notes %>

  <%= link_to_remove_association "remove goal", f %>

    <h4>Tasks:</h4>
    <div id="tasks">

      <%= f.simple_fields_for(:tasks) do |task| %>
      <%= render 'task_fields', :f => task %>
        <div class="links">
          <%= link_to_add_association 'add task', f, :tasks, :render_options => {:wrapper => 'bootstrap' } %>
        </div>
      <% end %>
    </div>
</div>

task_fields.html.erb

<div class="nested-fields">

  <%= f.input :task_type %>
  <%= f.input :date_of_task %>
  <%= f.input :complete, as: :boolean, checked_value: true, unchecked_value: false %>

  <%= link_to_remove_association "remove task", f %>

</div>

I have gone through my code to make sure that I am using proper div classes and ids, but I'm sure there is a problem with my form somewhere. I also added the necessary wrapper option for simple_form/bootstrap. Thank you in advance for taking the time to helping me out.

This sounds like a html/javascript problem. I just had a similar issue posted on cocoon issues, so it sounds like using an id instead of a class for a repeating thing.

Not sure if that causes the problem, but I see you have a <div id='tasks'>.

Although the behaviour I would expect in that case, would be that in the form it apparently works, but it will only get saved in the first one. Not exactly what you describe.

Secondly: is it intentional to have a "add task" or "add goal" for each child?

I would write those loops as follows:

<%= f.simple_fields_for(:tasks) do |task| %>
  <%= render 'task_fields', :f => task %>
<% end %>
<div class="links">
  <%= link_to_add_association 'add task', f, :tasks, :render_options => {:wrapper => 'bootstrap' } %>
<% end %>

[rant] Should I try to promote haml again? I see people making so many errors when using erb, it just gets messy (your indentation is very confusing), I sometimes honestly do not understand why more people use haml or slim. I find it makes my views way more readable. [/rant]