title: How to Hide (or Show) child drop-down (dynamic html) in jquery?
body: <p>Here create a dynamic table row when clicking on + button add a new row and click on - button remove row design like this,</p>
  
  <p><a href="https://i.stack.imgur.com/zDAhM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zDAhM.png" alt="enter image description here"></a></p>
  
  <p>Here subject drop-down display and also instructor drop-down display but the problem is when select subject maths instructor drop-down show and when select a science instructor drop-down hide but it's changing in all drop-down.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('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();
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;table class="table"&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;th&gt;From Time&lt;/th&gt;
        &lt;th&gt;To Time&lt;/th&gt;
        &lt;th&gt;Subject&lt;/th&gt;
        &lt;th&gt;Instructor&lt;/th&gt;
        &lt;th&gt;&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
    &lt;tbody id="schedule_table"&gt;
      &lt;tr id="ScheduleTable1"&gt;
        &lt;td&gt;&lt;input name="data[CourseSchedule][schedule_from_time][]" class="form-control from_timepicker" readonly="" value="11:54 AM" type="text" id="CourseScheduleScheduleFromTime"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input name="data[CourseSchedule][schedule_to_time][]" class="form-control to_timepicker" readonly="readonly" value="01:54 AM" type="text" id="CourseScheduleScheduleToTime"&gt;&lt;/td&gt;
        &lt;td&gt;
          &lt;select name="data[CourseSchedule] 
                 [schedule_subject][]" default="" class="form-control select2me 
                 course_topic" id="CourseScheduleScheduleSubject"&gt;
            &lt;option value=""&gt;Select Subject&lt;/option&gt;
            &lt;option value="gfgfg" selected="selected"&gt;gfgfg&lt;/option&gt;
            &lt;option value="Registration"&gt;Registration&lt;/option&gt;
            &lt;option value="Lunch Break"&gt;Lunch Break&lt;/option&gt;
            &lt;option value="Tea Break"&gt;Tea Break&lt;/option&gt;
          &lt;/select&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;select name="data[CourseSchedule][schedule_instructor][]" default="" class="form-control select2me instructor_name" id="CourseScheduleScheduleInstructor" style="display: none;"&gt;
            &lt;option value=""&gt;Select Subject&lt;/option&gt;
            &lt;option value="Chintan Mahant" selected="selected"&gt;Chintan Mahant&lt;/option&gt;
          &lt;/select&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;input type="button" class="btn btn-primary btn-style" onclick="remove('ScheduleTable1')" name="Delete" value="-"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="ScheduleTable0"&gt;
        &lt;td&gt;&lt;input name="data[CourseSchedule][schedule_from_time][]" class="form-control from_timepicker" readonly="readonly" value="11:54 AM" type="text" id="CourseScheduleScheduleFromTime"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input name="data[CourseSchedule][schedule_to_time][]" class="form-control to_timepicker" readonly="readonly" value="01:54 AM" type="text" id="CourseScheduleScheduleToTime"&gt;&lt;/td&gt;
        &lt;td&gt;
          &lt;select name="data[CourseSchedule] 
                 [schedule_subject][]" default="" class="form-control select2me 
                 course_topic" id="CourseScheduleScheduleSubject"&gt;
            &lt;option value=""&gt;Select Subject&lt;/option&gt;
            &lt;option value="gfgfg" selected="selected"&gt;gfgfg&lt;/option&gt;
            &lt;option value="Registration"&gt;Registration&lt;/option&gt;
            &lt;option value="Lunch Break"&gt;Lunch Break&lt;/option&gt;
            &lt;option value="Tea Break"&gt;Tea Break&lt;/option&gt;
          &lt;/select&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;select name="data[CourseSchedule] 
                 [schedule_instructor][]" default="" class="form-control select2me 
                 instructor_name" id="CourseScheduleScheduleInstructor" style="display: 
                 none;"&gt;
            &lt;option value=""&gt;Select Subject&lt;/option&gt;
            &lt;option value="Chintan Mahant" selected="selected"&gt;Chintan Mahant
            &lt;/option&gt;
          &lt;/select&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;input type="button" class="btn btn- 
              primary btn-style" id="AddScheduleRow1" name="Add" value="+"&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>