title: jQuery getting closest sibling element from $(this) not working
body: <p>I want to hide the span closest to the button clicked and also hide the button.</p>
  
  <p>The html goes like this</p>
  
  <pre><code>&lt;!-- the div will be looped using php --&gt;
  &lt;!-- this will only be a general idea of the code as the actual is very long and messy --&gt;
  &lt;div&gt;       
    &lt;form&gt;&lt;!-- This is like the head section --&gt;
      &lt;div&gt;
          &lt;div&gt; &lt;!-- some divs --&gt;
              &lt;button class="btn"&gt;&lt;/button&gt; &lt;!-- where i want it to work --&gt;
                  &lt;div&gt;&lt;/div&gt;&lt;!-- make this 5 times --&gt;
              &lt;span&gt;content to hide&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;      
    &lt;div&gt;&lt;!-- Comments to the head are here --&gt;
      &lt;button class="btn"&gt;&lt;/button&gt;&lt;!-- button where it works --&gt;
      &lt;span&gt;contains the comments&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Script</p>
  
  <pre><code>$('.btn').click(function(){
      $(this).hide();
      $(this).next("span").hide();
  });
  </code></pre>
  
  <p>I've tried the following below:</p>
  
  <pre><code>1. $(this).next("span").hide(); 
  2. $(this).closest("span").hide();
  </code></pre>
  
  <p>It only works if I call all the span elements.</p>
  
  <p>EDIT: the span is quite far as there are other elements like 5-10 elements before we reach the span.</p>