单击复选框以将项目添加到单独的div一次仅显示一个项目

Question

我有一些正在工作的代码。基本上，我有一个表格，每行旁边都有一个复选框，然后单击复选框将特定行项目添加到单独的div中（即，该行项目已添加到“收藏夹列表”中）

我在代码周围实现了一个命名函数，以使上下文菜单正常工作（这与单击复选框的作用相同）。不仅上下文菜单根本不起作用，而且单击复选框收藏夹div一次仅显示一个列表项。。此外，单击同一复选框以删除一个菜单项。列表项停止工作。

我重新整理了一些行，但这只是阻止了复选框完全起作用。我相信问题的根源是命名函数，但我不想摆脱它，因为我确实想使上下文菜单正常工作。

创建复选框：

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)

将项目添加到“我的收藏夹” 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)

上下文菜单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>

“我的收藏夹” 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>

---

更新：我将复选框渲染部分编辑为以前的内容，但是没有运气：

($("#km-table-id tbody tr")).on("click", function(evt) {

      if (evt.target.type !== "checkbox") {
        $(":checkbox", this).trigger("click");
      }
      console.log($("#km-table-id").is(":checked")); // shows as false...why?

    });

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

问题似乎出在推送到阵列上。与其将所选项目添加到末尾，不如替换其中的任何一个。