如何设置动态附加复选框的选中状态？

Question

最初，该功能是通过单击按钮将每个项目添加到列表中，然后通过单击该列表内附加项目上的按钮来删除该项目的。

但是，我将标记从按钮更改为复选框。

如何修改代码，以便将该项添加到列表中，同时选中初始项及其附加项的复选框。并且，如果其中一个相关项目未选中，则也不要选中另一个。

我想模拟一个愿望清单用户体验，其中将一个心形图标添加到列表中时将其填充，而将其移除时则不填充。

#include <stdio.h>
#include <stdlib.h>

struct newData
{
    int x;
    int y;
    int z;
}  ;

int main()
{
    struct newData data1;
    data1.x = 10;
    data1.y = 20;
    data1.z = 30;

    struct newData *data2 = &data1;
    long int *addr = data2;
    for (int i=0; i<3; i++)
    {
        printf("%d \n", *(addr+i));
    }
}

// Wish Function
var wish = {
  items: []
};
var update_product = function(product) {};
$(function() {
  //Add to wish
  var addToWish = function(product, qty) {
    qty = qty || 1;
    var wish = getWish();
    var indexOfId = wish.items.findIndex(x => x.id == product.id);
    if (indexOfId === -1) {
      wish.items.push({
        id: product.id,
        img: product.img,
        name: product.name,
      });
      $parent = $("#" + product.id).closest(".items__wish");
      $parent
        .find(".wish-icon")
        .addClass("active")
        .attr("data-prefix", "fas");
    } else {
      wish.items[indexOfId].qty++;
      wish.items[indexOfId].stock = Number(product.stock);
    }
    //Update popup wish
    updateWish(wish);
  };

  var getProductValues = function(element) {
    var productId = $(element)
      .closest(".items__wish")
      .find(".item__tile")
      .attr("id");
    var productImg = $(element)
      .closest(".items__wish")
      .find(".item__img")
      .attr("src");
    var productName = $(element)
      .closest(".items__wish")
      .find(".item__title")
      .html();
    return {
      id: productId,
      img: productImg,
      name: productName,
    };
  };
  $(".my-wish-add").on("change", function() {
    var product = getProductValues(this);
    addToWish({
      id: product.id,
      img: product.img,
      name: product.name,
    });
  });
  //Update wish html to reflect changes
  var updateWish = function(wish) {
    //Add to shopping wish dropdown
    $(".wishlist__items").html("");
    for (var i = 0; i < wish.items.length; i++) {
      $(".wishlist__items").append(
        "<li>" +
        '<div class="my-wish-item">' +
        "<img src='" +
        wish.items[i].img +
        "' />" +
        '<div class="wish-main">' +
        '<div class="wish-name">' +
        wish.items[i].name +
        "</div>" +
        '<div class="my-wish-remove-container">' +
        '<input type="checkbox" id="my-wish-remove' +
        i +
        '" class="my-wish-remove" aria-hidden="true">' +
        "<i class='fas fa-heart'></i>" +
        "</div>"
      );
      //Remove from wish on id
      var removeFromWish = function(id) {
        var wish = getWish();
        var wishIndex = wish.items.findIndex(x => x.id == id);
        wish.items.splice(wishIndex, 1);
        $parent = $("#" + id).closest(".items__wish");
        $parent
          .find(".wish-icon")
          .first()
          .removeClass("active")
          .attr("data-prefix", "far");
        //Update popup wish
        updateWish(wish);
      };
      (function() {
        var currentIndex = i;
        $("#my-wish-remove" + currentIndex).on("change", function() {
          $(this)
            .closest("li")
            .hide(400);
          setTimeout(function() {
            wish.items[currentIndex].stock = "";
            update_product(wish.items[currentIndex]);
            removeFromWish(wish.items[currentIndex].id);
          }, 400);
        });
      })();
    }
  };
  //Get Wish
  var getWish = function() {
    var myWish = wish;
    return myWish;
  };
});

body {
  font-family: "Font Awesome\ 5 Pro";
  font-weight: 900;
}

img {
  width: 50px;
}

.wishlist__list {
  position: absolute;
  right: 0;
}

.wishlist__items li {
  list-style: none;
}