JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul id="events" class="select" name="events">
  <li>Opt 1</li>
</ul>

CSS

ul.select {
  list-style: none;
  margin: 0;
  padding: 2px;
  height: 50vh;
  overflow-x: hidden;
  border: 1px solid grey;
  width: 50vw;
  background-color: black;
  color: white
}

ul.select li {
  padding: 2px 6px;
}

ul.select li:hover {
  cursor: pointer;
}

ul.select li.selected {
  background-color: lightgrey;
  color: black;
}

JavaScript

$('ul.select li').click(function(e) {
      var item = $(e.target);
      item.addClass('selected');
      item.siblings().removeClass('selected');
      $('#events').val(item.text());
    });

    $('#events').append('<li>Opt 2</li>');