jQuery - Finding next Div
<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>
