JSFiddle - React, Tailwind, and code Playground

by Daniel Lizik

HTML

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
</ul>

<button id="recent">get most recent click</button>

<span id="selected"></span>

CSS

li {
    border:1px solid black;
    margin:5px;
    padding:4px;
    cursor:pointer;
}

li:active {
    background-color:grey;
}

JavaScript

(function($el, $box, $recent) {
  "use strict";
    
  var order = [];

  Array.prototype.slice.call($el).forEach(function(el){
    el.addEventListener("click", click, false);
  });

  $recent.addEventListener("click", recent, false);

  function click(e) {
    var content = e.target.textContent;
    order.push(content);
    $box.textContent += content;
  }

  function recent(e) {
    alert(order[order.length-1]);
  }

})(
  document.querySelectorAll("li"), 
  document.getElementById("selected"),
  document.getElementById("recent")
);