title: RSpec + Capybara scoping returns unexpected results
body: <p>I have two tables: Suggestions and Keywords.
  I'm trying to test removal of items from Keywords (which puts it into Suggestions automatically).</p>
  
  <p>Here's my test:</p>
  
  <pre><code>it "removes a chosen keyword" do
    page.first(:link, "Add").click
    within(:css, "#keywords") do
      find('li:nth-child(1)').click_link('X')
      expect(page).to have_no_content(item.search.term)
    end
  end
  </code></pre>
  
  <p>It results in:</p>
  
  <pre><code>  1) New collection Suggestions removes a chosen keyword
       Failure/Error: expect(page).to have_no_content(item.search.term)
         expected not to find text "Gift for her" in "Keywords\nGift for her X"
       # ./spec/features/collections_spec.rb:60:in `block (4 levels) in &lt;top (required)&gt;'
       # ./spec/features/collections_spec.rb:53:in `block (3 levels) in &lt;top (required)&gt;'
  </code></pre>
  
  <p>Here's the print of the body element:</p>
  
  <pre><code>  &lt;div class="col-lg-5 col-md-6 mb-4" id="suggestions"&gt;
      &lt;div class="card h-100"&gt;
        &lt;div class="card-body"&gt;
          &lt;h4 class="card-title"&gt;Suggestions&lt;/h4&gt;
          &lt;p class="card-text"&gt; 
            &lt;ul class="list-group list-group-flush" id="suggestion-list"&gt;
                  &lt;li class="list-group-item"&gt;
                    Gift for her
                    &lt;a class="btn btn-primary" rel="nofollow" data-method="post" href="/collections/1/item/choose.1"&gt;Add&lt;/a&gt;&lt;a class="btn btn-primary" rel="nofollow" data-method="post" href="/collections/1/item/destroy.1"&gt;X&lt;/a&gt;&lt;br&gt;
                  &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;div class="col-lg-5 col-md-6 mb-4" id="keywords"&gt;
      &lt;div class="card h-100"&gt;
        &lt;div class="card-body"&gt;
          &lt;h4 class="card-title"&gt;Keywords&lt;/h4&gt;
          &lt;p class="card-text"&gt;                     
            &lt;ul class="list-group list-group-flush" id="keyword-list"&gt;
            &lt;/ul&gt;
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>And my <code>show.html.erb</code> file:</p>
  
  <pre><code>  &lt;div class="col-lg-5 col-md-6 mb-4" id="suggestions"&gt;
      &lt;div class="card h-100"&gt;
        &lt;div class="card-body"&gt;
          &lt;h4 class="card-title"&gt;Suggestions&lt;/h4&gt;
          &lt;p class="card-text"&gt; 
            &lt;ul class="list-group list-group-flush" id="suggestion-list"&gt;
              &lt;% if @suggestions %&gt;
                  &lt;% @suggestions.each do |s| %&gt;
                  &lt;li class="list-group-item"&gt;
                    &lt;%= Hpricot.uxs s.search.term %&gt;
                    &lt;%= link_to 'Add', collection_item_choose_path(@collection, s),{  method: :post, class: "btn btn-primary" } %&gt;&lt;%= link_to 'X', collection_item_destroy_path(@collection, s),{  method: :post, class: "btn btn-primary" } %&gt;&lt;br&gt;
                  &lt;/li&gt;
                &lt;% end %&gt;
              &lt;% end %&gt;
            &lt;/ul&gt;
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;div class="col-lg-5 col-md-6 mb-4" id="keywords"&gt;
      &lt;div class="card h-100"&gt;
        &lt;div class="card-body"&gt;
          &lt;h4 class="card-title"&gt;Keywords&lt;/h4&gt;
          &lt;p class="card-text"&gt;                     
            &lt;ul class="list-group list-group-flush" id="keyword-list"&gt;
              &lt;% if @keywords %&gt;
                &lt;% @keywords.each do |s| %&gt;
                  &lt;li class="list-group-item"&gt;
                    &lt;%= Hpricot.uxs s.search.term %&gt;
                    &lt;%= link_to 'X', collection_item_remove_path(@collection, s),{  method: :post, class: "btn btn-primary" } %&gt;&lt;br&gt;
                  &lt;/li&gt;
                &lt;% end %&gt;
              &lt;% end %&gt;
            &lt;/ul&gt;
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Seems to me like the scoping is off somehow, although I checked and the link does actually click (you can see it in the puts page.body). Any ideas?
  Thanks in advance!</p>