Not compatible with bootstrap theme

Problem/Motivation

When installed on a site using bootstrap theme the "other" field is always displayed. It should be displayed only when the "other" value is selected from the drop down.

Themes and modules can alter element markup by adding wrapper elements. This is valid for custom module development too.

<div class="form-item js-form-item form-type-select js-form-type-select form-item-field-favorite-color-0-select-other-list js-form-item-field-favorite-color-0-select-other-list form-group">
      <label for="edit-field-favorite-color-0-select-other-list" class="control-label">Favorite Color</label>  
  <div class="select-wrapper"><select class="form-text form-select form-select-other-list form-select form-control" data-drupal-selector="edit-field-favorite-color-0-select-other-list" id="edit-field-favorite-color-0-select-other-list" name="field_favorite_color[0][select_other_list]"><option value="_none" selected="selected">- None -</option><option value="red">Red</option><option value="green">Green</option><option value="blue">Blue</option><option value="other">Other</option></select></div>
  </div>

Proposed resolution

Figure out the input element based not on the immediate parent, but a specific selector instead.

var input_element = $(this).parent().next();