JSFiddle - React, Tailwind, and code Playground

by thirtydot

HTML

<a href="#" id="add">add one</a>
<div id="container">
    <div class="float">
        <div class="box" onclick="$(this).parent().remove();"></div>
    </div>
    <div class="float">
        <div class="box" onclick="$(this).parent().remove();"></div>
    </div>
    <div class="float">
        <div class="box" onclick="$(this).parent().remove();"></div>
    </div>
</div>

CSS

#add {
    position: fixed;
    z-index: 1;
}
#container {
    visibility: hidden;
    position: fixed;
    left: 0px;
    right: 0;
    top: 0;
    bottom: 0;
}
.float {
    -webkit-transform: scale3d(1,1,1);
    
    /* set visible to show what's going on */
    visibility: visible;
    background-color: rgba(0,0,255,0.25);

    /* visibility: hidden; */
    width: 100px;
    float: right;
    height: 100%;
    margin-right: 1em;
}
.box {
    cursor: pointer;
    background-color: red;
    width: 100px;
    bottom: 0;
    height: 100px;
    position: absolute;
}

JavaScript

$("#add").on("click",function(){
    $("#container").append('<div class="float"><div class="box" onclick="$(this).parent().remove();"></div></div>');
});