JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div id="list">
      <button class="append addbtn">append item</button>
      <ul id="items"></ul>
      <button class="prepend addbtn">prepend item</button>
    </div>
</div>

CSS

#list {
  width: 300px;
  min-height: 10em;
  background-color: #fff;
  display: flex;
  flex-direction: column-reverse;
}

.addbtn {
  display: none;
}

#list:hover ul:not(:empty) ~ .prepend {
  display: block;
}

#list:hover .append {
  display: block;
}

JavaScript

$(".addbtn").click(function() {
  if($(this).hasClass("prepend"))
  	$("#items").prepend($("<li>").text("prepended item " + $("#items").children().length));
	else
		$("#items").append($("<li>").text("appended item " + $("#items").children().length));
});