title: How to select the second Class element using jQuery working with Spock/Geb
body: <p>I have done a lot of research to find out the answer for the following to no avail.</p>
  
  <p>I have the following class in one <code>&lt;div&gt;</code> tag in the HTML.</p>
  
  <pre><code>&lt;button type='button' class='btn btn-navbar document-collapse pull-right' data-target='#document_521f7592388723hsjd73hd' data-toggle='collapse'&gt;
  </code></pre>
  
  <p>And I have few more classes within few other <code>&lt;div&gt;</code> tags but they use the same class name.</p>
  
  <pre><code>&lt;button type='button' class='btn btn-navbar document-collapse pull-right' data-target='#document_521f75032f23104747ed753c' data-toggle='collapse'&gt;
  </code></pre>
  
  <p>By Default, the first <code>&lt;div&gt;</code> is expanded and all the other <code>&lt;div&gt;</code> are collapsed. I need to be able to click on the second  and reveal thee other buttons and controls that are hidden.</p>
  
  <p>I tried the following but it didn't work.</p>
  
  <pre><code>expandOrderLink(wait:true)  { $(".btn.btn-navbar.document-collapse.pull-right:nth-child(2)") }
  </code></pre>
  
  <p>Is there a way we can look for all the class elements with the same name and choose the one we need (in my case the second one).</p>
  
  <p>Also note that I cannot use any other attributes since have dynamic content with encrypted info (such as #document_521f75032f23104747ed753c)</p>