title: Using site_prism with dynamically loaded fields
body: <p>I’m wrestling to get a test running where I am adding elements dynamically to a page. The adding is done with javascript using the cocoon gem.
  Here’s a picture of the page.
  <a href="https://i.stack.imgur.com/y2mv1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y2mv1.png" alt="screen shot"></a>
  Setting the ‘title’ and the ‘bijbelstudie’ and the ‘perikoop 1’ all works fine. It is also possible to add more pericopes by clicking the ‘add new pericope’ button using site-prism.
  The elements are grouped und a <code>pericopes</code> div.
  Each individual element can be recognized with a <code>form-group</code> class.</p>
  
  <p>My first question is: should I make a page object with ‘<strong>elements</strong>’ or with '<strong>sections</strong>’? I can’t tell from the documentation which should be the preferred approach here.
  My second question, I can’t get it to work. I never get an array of pericopes, neither with sections nor with elements.</p>
  
  <p>Please see the HTML code for a page with 2 elements, to understand the code.</p>
  
  <pre><code>&lt;div id='pericopes'&gt;
      &lt;div class='nested-fields'&gt;
          &lt;div class='input-group'&gt;
              &lt;div class="form-group string required studynote_pericopes_name"&gt;&lt;label
                      class="control-label string required" for="studynote_pericopes_attributes_0_name"&gt;&lt;abbr
                      title="required"&gt;*&lt;/abbr&gt; perikoop 1&lt;/label&gt;
                  &lt;div&gt;
                      &lt;div class="input-group col-sm-12"&gt;&lt;input class="form-control string required"
                                                                autofocus="autofocus"
                                                                placeholder="Genesis 1:1-3:21" type="text"
                                                                name="studynote[pericopes_attributes][0][name]"
                                                                id="studynote_pericopes_attributes_0_name"/&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;span class='input-group-btn'&gt;
  &lt;input type="hidden" name="studynote[pericopes_attributes][0][_destroy]" id="studynote_pericopes_attributes_0__destroy"
  value="false"/&gt;&lt;a class="delete remove_fields dynamic" style="margin-bottom:-9px" id="delete_pericope"
               href="#"&gt;&lt;/a&gt;
  &lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>My page object looks like this.</p>
  
  <pre><code>class PericopeSection &lt; SitePrism::Section
    element :pericope_field, '.nested-fields'
    element :add_pericope_button, '#add_pericope'
  end
  
  class NewStudynotesPage &lt; SitePrism::Page
    set_url '/studynotes/new'
  
    sections :pericopes, PericopeSection, 'div#pericopes'
  
    element :title_field, '#studynote_title'
    element :studynote_field, 'trix-editor'
    element :submit_button, '#submit_form'
  end
  </code></pre>