title: Cocoon/jQuery: append items to relevant table
body: <p>I have a Rails view that allows many PanelItems to be added to many Panels on a Page.</p>
  
  <h1>Models</h1>
  
  <pre><code>class Page &lt; ActiveRecord::Base
    has_many :panels
    accepts_nested_attributes_for :panels, allow_destroy: true
  
  class Panel &lt; ActiveRecord::Base
    has_many :panel_items
    accepts_nested_attributes_for :panel_items, allow_destroy: true, reject_if: :all_blank
  
  class PanelItem &lt; ActiveRecord::Base
  </code></pre>
  
  <h1>Views</h1>
  
  <h2>app/views/pages/_form.html.haml</h2>
  
  <pre><code>= simple_form_for @page, html: { class: 'form-inline' } do |form|
    = form.input :name, required: :required, autofocus: :autofocus
  
    %table.table.table-hover
      %tbody
        = form.simple_fields_for :panels do |panel_form|
          %tr
            %td
              .table-responsive
                %table.table.table-hover
                  %tbody.panel-items
                    = panel_form.simple_fields_for :panel_items do |panel_item_fields|
                      = render 'panel_item_fields', f: panel_item_fields
              = link_to_add_association panel_form, :panel_items,
                  'data-association-insertion-method' =&gt; 'append',
                  class: 'btn btn-success pull-right' do
                %span{class: 'glyphicon glyphicon-plus-sign'}
                New item
    = form.button :submit, "Update Page", class: 'btn-success'
  </code></pre>
  
  <h2>app/views/pages/_panel_item_fields.html.haml</h2>
  
  <pre><code>%tr.nested-fields
    %td
      = f.input :content_item_id,
          collection: current_site.content_items,
          selected: f.object.content_item_id,
          prompt: 'Select a content item'
    %td
      = link_to_remove_association f, title: 'remove this item',
          data: { toggle: 'tooltip', association: 'panel-item' } do
        %span.sr-only remove this item
        %span{class: 'glyphicon glyphicon-minus-sign'}
  </code></pre>
  
  <p>I want the <code>New item</code> button to append the <code>panel_item_fields</code> partial at the end of the associated table.  I've tried many combinations of <code>data-association-insertion-node</code> and <code>data-association-insertion-traversal</code> attributes with no joy.</p>
  
  <p>Cocoon uses the <code>data-</code> attributes to set the variables <code>insertionTraversal</code> and <code>insertionNode</code>, used in the following jQuery code:</p>
  
  <pre><code>$this[insertionTraversal](insertionNode)
  </code></pre>
  
  <p>but I don't really know how to read that.</p>
  
  <p><strong>EDIT:</strong>
  If I use:</p>
  
  <pre><code>'data-association-insertion-node' =&gt; '.panel-items',
  'data-association-insertion-method' =&gt; 'append',
  </code></pre>
  
  <p>The new row gets appended to every table on the page, instead of just the closest table.</p>