Javascript - Performing a function after first clicking on an item and then clicking on another item

Question

I have two lists and wanted to make that by clicking first on the first list and then on the second, perform a function to make the two items green.

<p class="question"><span class="mark-question">1.</span> Relacione as fabricantes aos seus veículos</p>
<ul class="first-column">
    <li data-answer="0,5">Ford</li>
    <li data-answer="2">Fiat</li>
    <li data-answer="3">Renault</li>
    <li data-answer="">Ferrari</li>
    <li data-answer="4" id="honda">Honda</li>
    <li data-answer="1">Chevrolet</li>
</ul>

<ul class="second-column">
    <li>Edge</li>
    <li>Ônix</li>
    <li>Palio</li>
    <li>Sandero</li>
    <li id="civic">Civic</li>
    <li>Fusion</li>
    <li>Fusquinha</li>
</ul>

Answer 1

Creates a variable clicked (for example) to store the already clicked element. Then you can make a simple color logic when you click and the variable already has an element there.

let clicked = null;
const first = document.querySelector('.first-column');
const second = document.querySelector('.second-column');

first.addEventListener('click', clickChecker);
second.addEventListener('click', clickChecker);

function clickChecker(e) {
  const el = e.target;
  if (!clicked) return clicked = el;
  else style(clicked, el);
  clicked = null;
}

function style(a, b) {
  a.style.backgroundColor = b.style.backgroundColor = '#ccf';
}

<p class="question"><span class="mark-question">1.</span> Relacione as fabricantes aos seus veículos</p>
<ul class="first-column">
  <li data-answer="0,5">Ford</li>
  <li data-answer="2">Fiat</li>
  <li data-answer="3">Renault</li>
  <li data-answer="">Ferrari</li>
  <li data-answer="4" id="honda">Honda</li>
  <li data-answer="1">Chevrolet</li>
</ul>

<ul class="second-column">
  <li>Edge</li>
  <li>Ônix</li>
  <li>Palio</li>
  <li>Sandero</li>
  <li id="civic">Civic</li>
  <li>Fusion</li>
  <li>Fusquinha</li>
</ul>