title: get the next element with a specific class after a specific element
body: <p>I have a HTML markup like this:</p>
  
  <pre><code>&lt;p&gt;
    &lt;label&gt;Arrive&lt;/label&gt;
    &lt;input id="from-date1" class="from-date calender" type="text" /&gt;
  &lt;/p&gt;
  
  &lt;p&gt;
    &lt;label&gt;Depart&lt;/label&gt;
    &lt;input id="to-date1" class="to-date calender" type="text" /&gt;
  &lt;/p&gt;
  
  &lt;p&gt;
    &lt;label&gt;Arrive&lt;/label&gt;
    &lt;input id="from-date2" class="from-date calender" type="text" /&gt;
  &lt;/p&gt;
  
  &lt;p&gt;
    &lt;label&gt;Depart&lt;/label&gt;
    &lt;input id="to-date2" class="to-date calender" type="text" /&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>I want to get the next element after from dates to get the corresponding to date. (Layout is a little more complex but from date has from-date class and to date has to-date class).</p>
  
  <p>This is I am trying to do, I want to take a from date element and find the next element in the dom with to-date class. I tried this:</p>
  
  <pre><code>$('#from-date1').next('.to-date')
  </code></pre>
  
  <p>but it is giving me empty jQuery element. I think this is because <code>next</code> gives the next sibling matching the selector. How can I get the corresponding <code>to-date</code>?</p>