Как визуализировать двух слушателей событий на одной странице

В моем приложении rails у меня есть страница, где мне нужно отображать или скрывать divs на основе опции select. Это должно произойти с двумя отдельными div в моем приложении, и поэтому я попытался использовать два прослушивателя событий jquery для достижения этого. Я действительно не понимаю javacript, поэтому я изо всех сил пытаюсь понять, что я делаю неправильно. Проблема в том, что только один прослушиватель событий может работать одновременно, а не оба прослушивателя событий. Это код в моем js

document.addEventListener('DOMContentLoaded',function() {
    document.querySelector('select[name="lesson[lesson_type]"]').onchange=changeEventHandler;
},false);
function changeEventHandler(event) {
    if(event.target.value === "physical" ) {
      hiddenDiv.style.display='inline-block';
    }
    else {
        hiddenDiv.style.display='none';
    }
}


document.addEventListener('DOMContentLoaded',function() {
  document.querySelector('select[name="lesson[course_id]"]').onchange=changeEventHandler;
},false);
function changeEventHandler(event) {
   var course_status = $('#lesson_course_id option:selected').attr('course_type');

    if(course_status == "physical" ) {
      $(".vimeo_link_display").hide();
    }
    else {
        $(".vimeo_link_display").show();
    }
}

Это два отдельных раскрывающихся списка на странице

   <%= f.input :lesson_type, label: t(".lesson_type") %>
   <%= f.association :course, collection: current_academy.courses.collect { |u| [u.title, u.id, { course_type: u.course_type }] }, prompt: t("select") %>

Это сгенерированный html для первого выбора в js

<select class="form-control enum optional form-control" 
  name="lesson[lesson_type]" id="lesson_lesson_type"><option value="">
  </option> <option selected="selected" value="video">video</option> 
  <option value="podcast">podcast</option> <option 
  value="physical">Physical</option>
</select>

Другой имеет этот сгенерированный html

<select class="form-control select required" name="lesson[course_id]" 
  id="lesson_course_id"><option value="">Vælg</option> <option 
  course_type="online" value="27">Lov om ansættelsesklausuler</option> 
  <option course_type="online" value="54">Skat: 
   Omstrukturering</option> 
  <option course_type="online" value="154">1min couse</option> <option 
  course_type="podcast" value="157">Ransack 101</option> <option 
  course_type="physical" value="158">Physical Course Test </option>
 </select>

Только одно из событий работает на странице. Моя цель состоит в том, чтобы работать, когда я выбираю правильные значения из каждого раскрывающегося списка.

Пожалуйста, дайте мне знать, если вам нужно больше образцов кода.