почему не срабатывает обработчик ->el.addEventListener(“click”, part2);

$("#liver").click(function() { 
  $("#organs").hide(); 
  var childs = $("#part_1").children(); 
  for (var index = 0; index < childs.length; index++) { 
    childs[index].style.visibility = 'visible'; 
  } 
  $("#part_1").siblings("#continue").css("visibility", "visible"); 
}); 
 
function part2() { 
  console.log('part2'); 
  var childs = $("#part_1").children(); 
  for (var index = 0; index < childs.length; index++) { 
    childs[index].style.visibility = 'hidden'; 
  } 
  $("#part_2").children().css("visibility", "visible"); 
 
  var el = document.getElementById('continue'); 
  el.removeEventListener("click", part2); 
  el.addEventListener("click", part3); 
}; 
 
function part3() { 
  console.log('part3'); 
  var childs = $("#part_2").children(); 
  for (var index = 0; index < childs.length; index++) { 
    childs[index].style.visibility = 'hidden'; 
  } 
  $("#part_3").children().css("visibility", "visible") 
}; 
 
var el = document.getElementById('continue'); 
el.addEventListener("click", part2);

.issues_for_liver>.child { 
  visibility: hidden; 
} 
 
.issues_for_liver>#continue { 
  visibility: hidden; 
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<div id="organs"> 
  <button id="liver"> Печень </button> 
</div> 
 
<div id="issues"> 
  <div class="issues_for_liver"> 
 
    <div id="part_1" class="child"> 
      <input type="checkbox" class="liver_1"> 
      <label for="liver_1" class="liver_1">если у вас болит печень 1</label> 
    </div> 
    <div id="part_2" class="child"> 
      <input type="checkbox" class="liver_2"> 
      <label for="liver_2" class="liver_2">если у вас болит печень 2</label> 
    </div> 
    <div id="part_3" class="child"> 
      <input type="checkbox" class="liver_3"> 
      <label for="liver_3" class="liver_3">если у вас болит печень 3</label> 
    </div> 
 
    <button id="continue">Продолжить</button> 
  </div> 
</div>