<div id="container">
  <div>
    <span>My list</span>
    <ol>
      <li>apple</li>
      <li>pear</li>
      <li>carrot</li>
      <li>pear</li>
      <li>apple</li>
      <li>yoshi</li>
    </ol>
  </div>
  <div>
    <span>My set</span>
    <ol id="set"></ol>
  </div>
</div>

body {
  font-family: monospace;
}

#container {
  display: flex;
  gap: 1rem;
  justify-content: space-evenly;
}

const allListItems = document.querySelectorAll("li");
const setList = document.getElementById("set");

// Create a new set and add list items
const mySet = new Set();

allListItems.forEach((item) => {
  mySet.add(item.textContent);
});

// List the items in the set
mySet.forEach((item) => {
  const li = document.createElement("li");
  li.textContent = item;
  setList.appendChild(li);
});