JSFiddle - React, Tailwind, and code Playground

by dAvidcA

HTML

<button type="button" id="botonSilla">Agregar silla</button>
<div id="fondo"></div>

CSS

#fondo {
    background: url("http://static.freepik.com/foto-gratis/oficina-vacia_2381918.jpg") no-repeat scroll 0 0 #FFFFFF;
    height: 400px;
    margin: 10px;
    width: 600px;
}
#fondo .silla {
    border: 1px dotted #000000;
    width: 100px;
    height: 131px;
    top: 220px;
    left: 220px;
    position: absolute;
    background: url("http://www.industriasrod.com/images/catalogo/giratorias_73silla_operadorG.png") no-repeat scroll 0 0 transparent;
    background-size:100%;
    cursor: move;
}
#fondo .silla .sCerrar {
    float: right;
    cursor: pointer;
    font-weight:bold;
    font-size: 10px;
    padding: 3px;
}

#fondo .silla .sCerrar:hover {
    color: red;
}

JavaScript

var totalSillas=0;
$("#botonSilla").click(function(){
    $("#fondo").append("<div id='silla"+totalSillas+"' class='silla'><div class='sCerrar'>X</div></div>");
    $("#silla"+totalSillas).resizable().draggable({ containment: "#fondo", scroll: false });
    totalSillas++;
    
    $(".sCerrar").click(function(){
        $(this).parent().remove();
    });
});