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">
</ul>
<button id="B1">
Test
</button>

CSS

ul.select {
  list-style: none;
  overflow-x: hidden;
}
ul.select li:hover {
  cursor: pointer;
}
ul.select li.selected {
  background-color: lightgray;
  color: black;
}

JavaScript

$(document).ready(function () {
  $('.select').on('click', 'li', function(e) {
    var item = $(e.target);
    item.addClass('selected');
    item.siblings().removeClass('selected')
    $('#events').val(item.text());
    var inf = item.attr("id");
  });
  $('#B1').on('click', function(e){
  	var selectedid;
    selectedid = $('#events').find('li.selected').attr('id');
    $('#events').empty();
		fillevents();
    $('#' + selectedid).click();
  });
});
fillevents();
function fillevents() {
for(i = 0; i < 10; i++){
	$('#events').append('<li id=\"' + i + '\">Opt '+ i + '</li>');
}
}