jQuery change function only for closest element
<p>i use </p>

<pre><code>$(document).ready(function() {
$(".productselector").change(function() {
    $(this).closest('.form-group').find("option:selected").each(function() {
        if ($(this).attr("value") == "value1") {
            $(".mini1").slideDown();
        }
        else {
            $(".mini1").slideUp();
        }
});
});
}); 
</code></pre>

<p>with the HTML </p>

<pre><code>&lt;div id="no1" style="display:block"&gt;
&lt;div class="form-group"&gt;
&lt;label&gt;1. Item&lt;/label&gt;

 &lt;select class="productselector"/&gt;
&lt;option value=""&gt;&lt;/option&gt;
&lt;option value="value1"&gt; Item A &lt;/option&gt;
&lt;option value="value2"&gt; Item B &lt;/option&gt;
&lt;/select&gt;
&lt;/div&gt;
&lt;span class="mini1" style=" display: none;"&gt;text&lt;/span&gt;

&lt;/div&gt;
&lt;div id="no2" style="display:block"&gt;
&lt;div class="form-group"&gt;
   &lt;label&gt;2. Item&lt;/label&gt;
&lt;select class="productselector"/&gt;
&lt;option value=""&gt;&lt;/option&gt;
&lt;option value="value1"&gt; Item A &lt;/option&gt;
&lt;option value="value2"&gt; Item B &lt;/option&gt;
&lt;/select&gt;
&lt;/div&gt;
&lt;span class="mini1" style=" display: none;"&gt;text&lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p>If i change one of the select fields to "Item A" i want the "text" to show up directly under the select field i just used and not under both. Looks like the </p>

<pre><code>.closest('.form-group')
</code></pre>

<p>has no effect...? <a href="https://jsfiddle.net/nanni/44w3n1k6/" rel="nofollow">jsFiddle here</a></p>