Click evt is registered to div surrounding checkbox instead of the checkbox itself

I have a list of documents with a checkbox next to each. Clicking on a checkbox is supposed to append that document to a separate div (aka a "Favorites List"). This does not work as intended, however clicking on the div that surrounds the checkbox correctly appends that document. Another issue is that clicking on a checkbox when the Favorites contains one or more documents clears the list, which is also not intended.

How can I properly register the checkbox itself to the click event rather than the div surrounding the checkbox? I've tried different methods, such as $( "input[type='checkbox']" ), but I've been coming up short so I thought I'd ask about it here.

JS snippet:

import $ from 'jquery';

import testDocs from '../test.json';
import { basename } from 'path';

import dt from 'datatables.net';

var categories = '';
var tableRes = '';

  export default class {
      constructor() {
        this.loadTableData();
      }

// this area contains code that's irrelevant for my question //

// ------ Rendering checkboxes ------- //
  $("#km-table-id tbody tr").on("click", function(evt) {
    evt.stopPropagation();
    if (evt.target.type !== "checkbox") {
      $(":checkbox", this).on("click");
    }      
  });

  // ------ Appending checkboxes ------- //
  let inputType = $("<input />", {"type": "checkbox"})
  let chkboxCol = $("#km-table-id tbody tr > td:nth-child(3)");

  chkboxCol.append(inputType).addClass("checkbox-class");


  // --- My Favorites functionality ---- //
  function faveFunc(evt) {
    let anchor = $($(evt.target).prev().find("a")[0]).clone();
    // let ancTxt = $(anchor).text();
    switch($(".populate-faves").find("a:contains(" + $(anchor).text() + ")").length)
    {
      case 0:
        $(".populate-faves").append(anchor);
        break;
      default:
        $(".populate-faves > a:contains(" + $(anchor).text() + ")").remove();
        break;
    }
  };


  function newList() {
    let data = $(evt.target).prev().find("a").eq(0).html();
    let outputList = $(".populate-faves");

    $(".populate-faves").html("");

    $("#km-table-id tbody tr)").each(function(i, el) {
        let cntxFave = $(".add-id", el);
        let fave = $(".checkbox-class", el);
        let itemText = $(data, el);

        if(cntxFave.is(".add-id")) {
          outputList.append("<li>" + itemText.html() + "</li>");
        }

        if(fave.prop("checked")) {
          outputList.append("<li>" + itemText.html() + "</li>");
        }
      });
  }; // ------------ newList

  $(".checkbox-class").on("click", faveFunc);

HTML snippet:

<div class="col-md-14"> <!-- Right -->

        <table id="km-table-id" class="cell-border display stripe-hover">
          <thead>
            <tr>
              <!-- <th></th> -->
              <th></th>
              <th></th>
              <th>Title</th>
              <th></th> <!-- Keep here--this is for checkbox col -->
            </tr>
          </thead>

          <tbody></tbody> 
    </table>