title: jQuery change function for multiple forms
body: <p>I have a selector form which will show or hide other form options (so you can use either past minutes or two datepicker fields):</p>
  
  <pre><code>$('form select[name=minutes_or_date_range]').change(function () {
      if ($('form select option:selected').val() == 'date_range') {
          $('.date_range').show();
          $('.minutes').hide();
      } else {
          $('.minutes').show();
          $('.date_range').hide();
      }
  });
  </code></pre>
  
  <p>In the html, I have two forms, both with the same code (with the exception that the ids are unique):</p>
  
  <pre><code>&lt;p&gt;
    &lt;label for="search_minutes_or_date_range"&gt;Time Selection:&lt;/label&gt;
    &lt;select name="minutes_or_date_range" id="search_minutes_or_date_range"&gt; 
      &lt;option value="minutes" selected="selected"&gt;Past Minutes&lt;/option&gt; 
      &lt;option value="date_range"&gt;Date Range&lt;/option&gt; 
    &lt;/select&gt;
  &lt;/p&gt;
  &lt;div class="minutes" &gt;
    &lt;p&gt;
      &lt;label for="search_past_minutes"&gt;Past X Minutes:&lt;/label&gt;
      &lt;input id="search_past_minutes" type="text" 
             value="10" name="past_minutes" class="spinner"/&gt;
    &lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="date_range" style="display: none"&gt;
    &lt;p&gt;
      &lt;label for="search_start_date"&gt;Start Date:&lt;/label&gt;
      &lt;input id="search_start_date" class="date_picker" 
             type="text" name="start_date" /&gt;
    &lt;/p&gt;
    &lt;p&gt;
      &lt;label for="search_end_date"&gt;End Date:&lt;/label&gt;
      &lt;input id="search_end_date" class="date_picker"
             type="text" name="end_date" /&gt;
    &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So there are two occurrences of the above code with only the ids changed. How would I change the jQuery so this show hide function works for both of them independently? Currently, only the first one has any effect and it effects both occurrences of the div.</p>