Chart JS Html Legend Plugin loop data

I am using Chart JS' Html Legend Plugin, this plugin loops all labels on two of my charts and creates a legend, but it does not loop my data. And also I couldn't find a way to show percentage when mouse hovers on chart pieces, like this :

Here is my js:

 if ($("canvas").length > 0) {

// chart-js-plugin
const getOrCreateLegendList = (chart, id) => {
  const legendContainer = document.getElementById(id);
  let listContainer = legendContainer.querySelector("ul");

  if (!listContainer) {
    listContainer = document.createElement("ul");
    listContainer.style.display = "flex";
    listContainer.style.flexDirection = "row";
    listContainer.style.margin = 0;
    listContainer.style.padding = 0;

    legendContainer.appendChild(listContainer);
  }

  return listContainer;
};
const htmlLegendPlugin = {
  id: "htmlLegend",
  afterUpdate(chart, args, options) {
    const ul = getOrCreateLegendList(chart, options.containerID);

    // Remove old legend items
    while (ul.firstChild) {
      ul.firstChild.remove();
    }

    // Reuse the built-in legendItems generator
    const items = chart.options.plugins.legend.labels.generateLabels(chart);
    items.forEach((item, i) => {
      const li = document.createElement("li");
      li.style.alignItems = "center";
      li.style.cursor = "pointer";
      li.style.display = "flex";
      li.style.flexDirection = "row";
      li.style.marginLeft = "10px";

      li.onclick = () => {
        const { type } = chart.config;
        if (type === "pie" || type === "doughnut") {
          // Pie and doughnut charts only have a single dataset and visibility is per item
          chart.toggleDataVisibility(item.index);
        } else {
          chart.setDatasetVisibility(
            item.datasetIndex,
            !chart.isDatasetVisible(item.datasetIndex)
          );
        }
        chart.update();
      };

      // Color box
      const boxSpan = document.createElement("span");
      boxSpan.style.background = item.fillStyle;
      boxSpan.style.borderColor = item.strokeStyle;
      boxSpan.style.borderWidth = item.lineWidth + "px";
      boxSpan.style.display = "flex";
      boxSpan.style.alignItems="center"
      boxSpan.style.justifyContent="center"
      boxSpan.style.height = "20px";
      boxSpan.style.marginRight = "10px";
      boxSpan.style.width = "20px";

      // Text
      const textContainer = document.createElement("p");
      textContainer.style.color = item.fontColor;
      textContainer.style.margin = 0;
      textContainer.style.padding = 0;
      textContainer.style.textDecoration = item.hidden
        ? "line-through"
        : "";

      const text = document.createTextNode(item.text);
      textContainer.appendChild(text);

      // const spantext = document.createTextNode(item.data);
      // boxSpan.appendChild(spantext);

      li.appendChild(boxSpan);
      li.appendChild(textContainer);
      ul.appendChild(li);
    });
  },
  
};

// chart-js-plugin-end

//   chart-js-init


// var lorem = JSON.stringify(data.datasets);
// console.log(lorem[0].data[0])
var doughnut = $("#myChart");
var myChart = new Chart(doughnut, {
  type: "doughnut",
  data: {
    labels: [
      "Logart1",
      "Logart2",
      "Logart3",
      "Logart71",
      "Logart16",
      "Logart15",
      "Logart14 FK",
      "Logart13",
      "Logart81",
      "Logart91",
    ],
    datasets: [
      {
        data: [17, 16, 14, 12, 7, 5, 4, 4, 3, 3],
        backgroundColor: [
          "rgb(19, 175, 233)",
          "rgb(236, 88, 88)",
          "rgb(79, 187, 116)",
          "rgb(241, 96, 133)",
          "rgb(254, 209, 5)",
          "rgb(246, 136, 80)",
          "rgb(254, 209, 5)",
          "rgb(222, 212, 80)",
          "rgb(252, 177, 23)",
          "rgb(0, 0, 0)",
        ],
        hoverOffset: 4,
      },
    ],
  },

  options: {
    plugins: {
      htmlLegend: {
        containerID: "list-holder",
      },
      legend: {
        display: false,
      },
    },
  },

  plugins: [htmlLegendPlugin],
});

var doughnut1 = $("#myChart-1");
var myChart1 = new Chart(doughnut1, {
  type: "doughnut",
  data: {
    labels: [
      "Fros63",
      "Fros73",
      "Fros27",
      "Fros37 FK",
      "MKE Fros15",
      "Fros8",
      "Fros7",
      "Fros5",
      "Fros3",
      "Fros1",
    ],
    datasets: [
      {
        data: [12, 10, 8, 8, 7, 7, 6, 5, 5, 5],
        backgroundColor: [
          "rgb(19, 175, 233)",
          "rgb(236, 88, 88)",
          "rgb(79, 187, 116)",
          "rgb(241, 96, 133)",
          "rgb(254, 209, 5)",
          "rgb(246, 136, 80)",
          "rgb(254, 209, 5)",
          "rgb(222, 212, 80)",
          "rgb(252, 177, 23)",
          "rgb(0, 0, 0)",
        ],
        hoverOffset: 4,
      },
    ],
  },
  options: {
    plugins: {
      htmlLegend: {
        containerID: "list-holder2",
      },
      legend: {
        display: false,
      },
    },
  },
  plugins: [htmlLegendPlugin],
});

// chart-js-init-end
}

How can I achieve these?

Here is Codepen Link

Thank you.