JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#list {
  width: 300px;
  min-height: 10em;
  background-color: #fff;
  display:flex;
}
.addbtn {
  display: none;
}

#items:empty+.addbtn {
  display:none !important;
}

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


.addbtn.append {
  order:3;
}
#items {
  order:2;
  outline:1px solid red;
}
.addbtn.prepend {
  order:1;
}

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));
});