JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
  <input id="HotelsPlacesEan" name="city" type="search" class="form input-lg RTL search-location deleteoutline opensuggest" placeholder="" value="" required />
  <div class="suggest-div">
    <span class="suggest-content hiddd">
            <ul class="liststyle">
               <li class="whylist"><b>Popular Destinations</b></li>
               <li class="suggest"><a class="selectlink" href="">Montego Bay</a></li>
               <li class="suggest"><a class="selectlink" href="">Negril</a></li>
               <li class="suggest"><a class="selectlink" href="">Ocho Rios</a></li>
               <li class="suggest"><a class="selectlink" href="">Kingston</a></li>
               <li class="suggest" style="border-bottom:0px;"><a class="selectlink" href="">Port Antonio</a></li>
            </ul>
         </span>
  </div>
</div>

CSS

a.selectlink {
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  display: block;
}

a.selectlink:hover {
  color: #fff;
}

ul.liststyle {
  margin-top: 0px;
}

li.whylist {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #ddd;
  color: #000;
  padding-left: 10px;
  font-size: 15px;
  font-weight: 100;
}

li.suggest {
  border-bottom: 1px solid #ddd;
  font-size: 15px;
  font-weight: 100;
}

li.suggest:hover {
  background-color: #515B62;
  color: #fff;
}

.suggest-div {
  position: absolute;
  width: 100%;
}

span.suggest-content {
  display: block;
  background-color: #fff!important;
  margin-top: 0px;
  line-height: 1.2;
  position: absolute;
  width: 100%;
  z-index: 999;
}

span.suggest-content:focus {
  display: none;
}

.hiddd {
  display: none!important;
}

.form {
  font-weight: 100!important;
}

JavaScript

$(".selectlink").click(function(e) {
  e.preventDefault();
   $("#HotelsPlacesEan").val($(this).text()); // won't work with 0 timeout
});

$(".opensuggest").click(function() {
  $(".suggest-content").toggleClass("hiddd");
});

$("input").on("focusout", function(e) {
  // console.log(e);
  setTimeout(function() {
    $(".suggest-content").addClass("hiddd");
  }, 250); // set to 0 before testing the handlers below...
});

/*
$(".selectlink").mousedown(function(e) {
  $("#HotelsPlacesEan").val($(this).text());
});
*/


// Delegated event: listen on #wrapper for focusout. Handler called only
// if e.target is a.selectlink. So this acts like a filter.
// see delegated event @ http://api.jquery.com/on/
/*
$("#wrapper").on("focusout", "a.selectlink", function(e) {
  console.log("Focusout event:", e, "e.target/trigger/this:", this);
  console.log("text of e.target/this:", $(e.target).text());
  $("#HotelsPlacesEan").val($(this).text());
});
*/