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

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

.setTwoMatch {
  color: orange;
  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");

// 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);
});

const set1only = set1.difference(set2);
const set2only = set2.difference(set1);

allListItems.forEach((item) => {
  if (set1only.has(item.textContent)) {
    item.className = "setOneMatch";
  } else if (set2only.has(item.textContent)) {
    item.className = "setTwoMatch";
  }
});