JSFiddle - React, Tailwind, and code Playground

by ikiK_Cro

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div id="links-list"></div>
  </body>

</html>

JavaScript

let arr = [{
    id: 1,
    clicks: 0,
    text: "A",
    href: "#",
  },
  {
    id: 2,
    clicks: 0,
    text: "B",
    href: "#",
  },
  {
    id: 3,
    clicks: 0,
    text: "C",
    href: "#",
  },
  {
    id: 4,
    clicks: 0,
    text: "D",
    href: "#",
  },
  {
    id: 5,
    clicks: 0,
    text: "E",
    href: "#",
  },
];

// localStorage.clear();

const makeLIst = (data) => {
  const list = document.querySelector("#links-list");
  list.innerHTML = "";

  localStorage.list ?
    (data = JSON.parse(localStorage.list)) :
    (data = arr);

  data.sort((a, b) => b.clicks - a.clicks);

  data.forEach((i) => {
    list.insertAdjacentHTML(
      "beforeend",
      '<a href="' +
      i.href +
      '" id="' +
      i.id +
      '" >' +
      i.text +
      "</a></br>"
    );
  });

  document.querySelectorAll("#links-list a").forEach((item) => {
    item.addEventListener("click", (event) => {
      const foundIndex = data.findIndex((x) => x.id == event.target.id);
      data[foundIndex].clicks = data[foundIndex].clicks + 1;
      localStorage.setItem("list", JSON.stringify(data));
      makeLIst(data);
    });
  });
};

makeLIst(arr);