title: jQuery change function only for closest element
body: <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>