Clicking on checkbox only shows one table row at a time (and doesn't remove row on deselecting)

I had a bit of code that was working. Basically I have a table with a checkbox next to each row and clicking on a checkbox added that particular row item to a separate div (i.e. it added that row item to a "Favorites List")

I implemented a named function surrounding the code in order to get a context menu working (that was to do the same thing as clicking on the checkbox). Not only is the context menu not working at all, but when clicking on a checkbox the Favorites div only displays one list item at a time. Also, the clicking on the same checkbox to remove a list item stopped working.

I shuffled some lines around but it just prevented the checkboxes from working entirely. I believe that the source of the problem is the named function, but I don't want to get rid of it because I do want to get the context menu working.

Checkbox creation:

function makeChx(evt) {
  if (evt.target.type !== "checkbox") {
    $(":checkbox", this).trigger("click");
  }
}

$("#km-table-id tbody tr").append($("<input />", {"type": "checkbox"}).addClass("checkbox-class")).on("click", makeChx)

Adding item to My Favorites div:

const $table = $("#km-table-id")
  let table = $table.DataTable();
  const favesArr = [];

  function faveFunc(evt) {

  let data = table.row(this.parentNode).data(),
  checked = $(this).is(":checked"),
  dataIndex = favesArr.indexOf(data);
  if (checked) {
    if (dataIndex === -1) {
      favesArr.push(data); // add item
    }
  } else {
    if (dataIndex > -1) {
      favesArr.splice(dataIndex, 1); // remove item
    }
  }  




for (var i = 0; i < favesArr.length; i++) {
    ($(".populate-faves").empty()); // removes all previous entries
    $(".populate-faves").append(JSON.stringify(favesArr[i].Titles) + '<br/> 
    <br/>').addClass("faved-doc");  
 }


   }; // ------------ faveFunc


   $(".checkbox-class").on("click", faveFunc)
   $("#add-id").on("click", faveFunc)

Context menu HTML:

<ul class="custom-menu">
        <li data-action="open">Open Document</li>
        <li id="add-id">Set As Favorite</li>
        <li data-action="email"><a href="mailto:?subject=subject">Email Document</a></li>
      </ul>

My Favorites div HTML:

<div id="myFave.hs-gc-header" class="faves-div">
    <p style="font-weight:bold">My Favorites:</p>
    <p class="populate-faves"></p>
</div>