Eu tenho uma marcação HTML como esta:

<p>
  <label>Arrive</label>
  <input id="from-date1" class="from-date calender" type="text" />
</p>

<p>
  <label>Depart</label>
  <input id="to-date1" class="to-date calender" type="text" />
</p>

<p>
  <label>Arrive</label>
  <input id="from-date2" class="from-date calender" type="text" />
</p>

<p>
  <label>Depart</label>
  <input id="to-date2" class="to-date calender" type="text" />
</p>

Eu quero obter o próximo elemento depois de datas para obter o correspondente a data. (O layout é um pouco mais complexo, mas a partir da data tem classe de data e até a data tem classe de data).

Isso é o que estou tentando fazer, eu quero pegar um elemento de data e encontrar o próximo elemento no dom com a classe data. Eu tentei isso:

$('#from-date1').next('.to-date')

mas está me dando um elemento jQuery vazio. Acho que isso é porquenext dá o próximo irmão que corresponde ao seletor. Como posso obter o correspondenteto-date?