JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li class='list'>remove box100</li>
  <li class='list'>remove box200</li>
  </ul>

  <div class='box' box='box1'>add box1</div>
  <div class='box' box='box2'>add box2</div>
  <div class='box' box='box3'>add box3</div>
  <div class='box' box='box4'>add box4</div>
  <div class='box' box='box5'>add box5</div>

CSS

.box{
  height:50px;
  width:50px;
  border:2px solid blue;
  display: inline-block;
}

ul li{
    height:50px;
  width:50px;
  border:2px solid blue;
  display: inline-block;
  margin-right: 1px;
}

JavaScript

$('.box').on('click', function(){
	var txt = $(this).attr('box');
	$('ul').append("<li class='list'>remove "+txt+"</li>");
});

$('.list').on('click', function(){
	$(this).remove();
});