<div id="container">
  <div>
    <span>Set one</span>
    <ol id="set-one">
      <li>apple</li>
      <li>banana</li>
      <li>pear</li>
      <li>carrot</li>
    </ol>
  </div>
  <div>
    <span>Set two</span>
    <ol id="set-two">
      <li>banana</li>
      <li>peach</li>
      <li>plum</li>
      <li>apple</li>
    </ol>
  </div>
  <div>
    <span>Union set</span>
    <ol id="union"></ol>
  </div>
</div>

body {
  font-family: monospace;
}
.match {
  color: cornflowerblue;
  font-weight: bold;
  text-decoration: underline;
}

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

const listOneItems = document.querySelectorAll("#set-one li");
const listTwoItems = document.querySelectorAll("#set-two li");
const allListItems = document.querySelectorAll("li");
const unionList = document.getElementById("union");

// Create sets for each list
const set1 = new Set();
const set2 = new Set();

// Add list items to each set
listOneItems.forEach((item) => {
  set1.add(item.textContent);
});
listTwoItems.forEach((item) => {
  set2.add(item.textContent);
});

// Create a union of both sets
const unionSet = set1.union(set2);

// List the items in the union
unionSet.forEach((item) => {
  const li = document.createElement("li");
  li.textContent = item;
  unionList.appendChild(li);
});