При нажатии на флажок, чтобы добавить элемент в отдельный 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>

Избранное My Div:

<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"));

Проблема, похоже, связана с передачей в массив.Вместо добавления выбранного элемента в конец он заменяет тот, который есть.