jQuery don't want to toggle class to the parent of an element by one click only

Question

I have a todo list it has a check mark button. I want to toggle a class to the parent of check mark button by clicking on it. but it works only by double clicking.

HERE IS THE CODE

<div class="todo-task-list">
  <div class="todo-task">
    Lorem ipsum dolor sit.
    <i class="fe fe-check todo-icon todoCheck"></i>
    <i class="fe fe-trash todo-icon todoRemove"></i>
  </div>
</div>

document.addEventListener('click', function (e) {

    var checkTask = $(".todoCheck");

    checkTask.on('click', function() {
      var par = $(this).parent(); 

      if (par.hasClass('checked')) {
        par.removeClass("checked")
      } else {
        par.addClass("checked")
      }
    })

}, false);