How to traverse to next dom element with specific class?

Question

I have the following code

    <div class="col-md-3">
  <label for="transmittal_transmittal_titles_attributes_<%= index %>_title_language" class="control-label">
    Pub Date
  </label>
  <select class="form-control select_boxes"
          id="transmittal_transmittal_titles_attributes_<%= index %>_pub_date_options"
          name="transmittal[transmittal_titles_attributes][<%= index %>][title_language]">
    <%= options_for_select(@pub_date_options) %>
  </select>
</div>
<div id="pub-date-picker" class="col-md-3">
  <label for="transmittal_transmittal_titles_attributes_<%= index %>_pub_date" class="control-label">
    Select a Pub Date
  </label>

  <div class="input-group date">
    <input type="text"
           id="transmittal_transmittal_titles_attributes_<%= index %>_pub_date"
           name="transmittal[transmittal_titles_attributes][<%= index %>][pub_date]"
           value="<%= StringUtils.format_date tt.pub_date %>"
           data-title="<%= tt.title %>"
           class="form-control transmittal-title-pub-date">
    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
  </div>
</div>

From "select_boxes" how do I traverse to find the closest input-group date?

Answer 1

You can use this:

$('.select_boxes').parent().next().find('.input-group.date');

FIDDLE: https://jsfiddle.net/unafr1s0/1/