JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <div class="item">
    <div class="content"> content1 </div>
    <div class="delete"> delete </div>
  </div>

  <div class="item">
    <div class="content"> content2 </div>
    <div class="delete"> delete </div>
  </div>

  <div class="item">
    <div class="content"> content3 </div>
    <div class="delete"> delete </div>
  </div>
</div>
<div id="add">add</div>

CSS

.delete { display:none }
#add { color:red }

JavaScript

$(".item").mouseenter(function(){ $(this).children('.delete').show(); });

$(".item").mouseleave(function(){ $(this).children('.delete').hide(); });

$(".delete").click(function(){
    $(this).parent().hide(); });

$("#add").click(function(){
  action = 'addItem';
  $.ajax({
    type: "POST",
    url: "/echo/json/",
    data: 'action='+action,
    cache: false,
    success: function(json){
        $(".main").append('<div class="item"><div class="content"> content new </div><div class="delete"> delete </div></div>');
    }
  });
});