JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#list {
  width: 300px;
  min-height: 10em;
  background-color: #fff;
}

.addbtn {
  display: none;
}

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

JavaScript

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