title: jQuery - Finding next Div
body: <p>I am trying to find the next div after an input button and toggle it. </p>
  
  <p>What am I doing wrong?</p>
  
  <p>JS:</p>
  
  <pre><code>$(".showNextExperience").click(function() {
      $(".experience").show();
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input class="showNextExperience" &gt;
  &lt;div class="experience"&gt;Experience 1&lt;/div&gt;
  
  &lt;input class="showNextExperience"&gt;
  &lt;div class="experience"&gt;Experience 2&lt;/div&gt;
  
  &lt;input class="showNextExperience"&gt;
  &lt;div class="experience"&gt;Experience 3&lt;/div&gt;
  
  &lt;input class="showNextExperience" &gt;
  &lt;div class="experience"&gt;Experience 4&lt;/div&gt;
  </code></pre>
  
  <p>Okay, this DOES NOT work --- </p>
  
  <pre><code>$(".showExperience").click(function() {
      $(this).next(".experience").toggle();
  });
  
  &lt;table class="data"&gt;
      &lt;tr class="tableHead"&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td width="50" align="right"&gt;&lt;input type="button" class="showExperience" value="show"&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;div class="experience"&gt;2&lt;/div&gt;
  </code></pre>
  
  <p>When I move the input button just above the DIV it works just fine. </p>
  
  <pre><code>$(".showExperience").click(function() {
      $(this).next(".experience").toggle();
  });
  
  &lt;input type="button" class="showExperience" value="show"&gt;
  &lt;div class="experience"&gt;2&lt;/div&gt;
  </code></pre>
  
  <p>Can you explain that?</p>