Как скрыть (или показать) дочерний раскрывающийся список (динамический HTML) в JQuery?

Question

Здесь создайте строку динамической таблицы, нажав кнопку +, добавьте новую строку и нажмите - кнопку, чтобы удалить дизайн строки следующим образом:

Здесь отображается раскрывающийся список субъектов, а также раскрывающийся список инструкторов, но проблема заключается в том, что при раскрытии раскрывающегося списка «Выберите преподавателя по математике» и при скрытии раскрывающегося списка «Преподаватель естественных наук», но все меняется в раскрывающемся списке.

$('body').on('change', '.course_topic', function() {
  var topic_name = $(this).val();
  var names = ['Registration', 'Lunch Break', 'Tea Break'];

  if (jQuery.inArray(topic_name, names) != '-1') {
    $(this).closest('table').find('tbody#schedule_table').find('td:last').parent().find('td').hide();
  } else {
    $(this).closest('table').find('tbody#schedule_table').find('td:last').parent('td').find('td').show();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <tbody>
    <tr>
      <th>From Time</th>
      <th>To Time</th>
      <th>Subject</th>
      <th>Instructor</th>
      <th></th>
    </tr>
  </tbody>
  <tbody id="schedule_table">
    <tr id="ScheduleTable1">
      <td><input name="data[CourseSchedule][schedule_from_time][]" class="form-control from_timepicker" readonly="" value="11:54 AM" type="text" id="CourseScheduleScheduleFromTime"></td>
      <td><input name="data[CourseSchedule][schedule_to_time][]" class="form-control to_timepicker" readonly="readonly" value="01:54 AM" type="text" id="CourseScheduleScheduleToTime"></td>
      <td>
        <select name="data[CourseSchedule] 
               [schedule_subject][]" default="" class="form-control select2me 
               course_topic" id="CourseScheduleScheduleSubject">
          <option value="">Select Subject</option>
          <option value="gfgfg" selected="selected">gfgfg</option>
          <option value="Registration">Registration</option>
          <option value="Lunch Break">Lunch Break</option>
          <option value="Tea Break">Tea Break</option>
        </select>
      </td>
      <td>
        <select name="data[CourseSchedule][schedule_instructor][]" default="" class="form-control select2me instructor_name" id="CourseScheduleScheduleInstructor" style="display: none;">
          <option value="">Select Subject</option>
          <option value="Chintan Mahant" selected="selected">Chintan Mahant</option>
        </select>
      </td>
      <td><input type="button" class="btn btn-primary btn-style" onclick="remove('ScheduleTable1')" name="Delete" value="-"></td>
    </tr>
    <tr id="ScheduleTable0">
      <td><input name="data[CourseSchedule][schedule_from_time][]" class="form-control from_timepicker" readonly="readonly" value="11:54 AM" type="text" id="CourseScheduleScheduleFromTime"></td>
      <td><input name="data[CourseSchedule][schedule_to_time][]" class="form-control to_timepicker" readonly="readonly" value="01:54 AM" type="text" id="CourseScheduleScheduleToTime"></td>
      <td>
        <select name="data[CourseSchedule] 
               [schedule_subject][]" default="" class="form-control select2me 
               course_topic" id="CourseScheduleScheduleSubject">
          <option value="">Select Subject</option>
          <option value="gfgfg" selected="selected">gfgfg</option>
          <option value="Registration">Registration</option>
          <option value="Lunch Break">Lunch Break</option>
          <option value="Tea Break">Tea Break</option>
        </select>
      </td>
      <td>
        <select name="data[CourseSchedule] 
               [schedule_instructor][]" default="" class="form-control select2me 
               instructor_name" id="CourseScheduleScheduleInstructor" style="display: 
               none;">
          <option value="">Select Subject</option>
          <option value="Chintan Mahant" selected="selected">Chintan Mahant
          </option>
        </select>
      </td>
      <td><input type="button" class="btn btn- 
            primary btn-style" id="AddScheduleRow1" name="Add" value="+">
      </td>
    </tr>
  </tbody>
</table>

Answer 1

Это происходит из-за повторяющихся идентификаторов, атрибут id должен быть уникальным в том же документе.

Это будет исправлено путем замены дубликатов общими классами.

Тогда ваш селектор может быть просто:

$(this).closest('tr').find('.instructor_name');

$('body').on('change', '.course_topic', function() {
  var topic_name = $(this).val();
  var names = ['Registration', 'Lunch Break', 'Tea Break'];
  var instructor_name = $(this).closest('tr').find('.instructor_name');

  if ($.inArray(topic_name, names) != -1) {
    instructor_name.hide();
  } else {
    instructor_name.show();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class="table">
  <tbody>
    <tr>
      <th>From Time</th>
      <th>To Time</th>
      <th>Subject</th>
      <th>Instructor</th>
      <th></th>
    </tr>
  </tbody>
  <tbody id="schedule_table">
    <tr class="ScheduleTable1">
      <td><input name="data[CourseSchedule][schedule_from_time][]" class="form-control from_timepicker" readonly="" value="11:54 AM" type="text"></td>
      <td><input name="data[CourseSchedule][schedule_to_time][]" class="form-control to_timepicker" readonly="readonly" value="01:54 AM" type="text"></td>
      <td>
        <select name="data[CourseSchedule] 
           [schedule_subject][]" default="" class="form-control select2me 
           course_topic">
          <option value="">Select Subject</option>
          <option value="gfgfg" selected="selected">gfgfg</option>
          <option value="Registration">Registration</option>
          <option value="Lunch Break">Lunch Break</option>
          <option value="Tea Break">Tea Break</option>
        </select>
      </td>
      <td>
        <select name="data[CourseSchedule][schedule_instructor][]" default="" class="form-control select2me instructor_name" style="display: none;">
          <option value="">Select Subject</option>
          <option value="Chintan Mahant" selected="selected">Chintan Mahant</option>
        </select>
      </td>
      <td><input type="button" class="btn btn-primary btn-style" onclick="remove('ScheduleTable1')" name="Delete" value="-"></td>
    </tr>
    <tr class="ScheduleTable0">
      <td><input name="data[CourseSchedule][schedule_from_time][]" class="form-control from_timepicker" readonly="readonly" value="11:54 AM" type="text"></td>
      <td><input name="data[CourseSchedule][schedule_to_time][]" class="form-control to_timepicker" readonly="readonly" value="01:54 AM" type="text"></td>
      <td>
        <select name="data[CourseSchedule] 
           [schedule_subject][]" default="" class="form-control select2me 
           course_topic">
          <option value="">Select Subject</option>
          <option value="gfgfg" selected="selected">gfgfg</option>
          <option value="Registration">Registration</option>
          <option value="Lunch Break">Lunch Break</option>
          <option value="Tea Break">Tea Break</option>
        </select>
      </td>
      <td>
        <select name="data[CourseSchedule] 
           [schedule_instructor][]" default="" class="form-control select2me 
           instructor_name" style="display: 
           none;">
          <option value="">Select Subject</option>
          <option value="Chintan Mahant" selected="selected">Chintan Mahant
          </option>
        </select>
      </td>
      <td><input type="button" class="btn btn- 
        primary btn-style" id="AddScheduleRow1" name="Add" value="+">
      </td>
    </tr>
  </tbody>
</table>