JSFiddle - React, Tailwind, and code Playground

by charlescarver

HTML

<a href="#one">one</a>
<a href="#two">two</a>
<a href="#three">three</a>
<br />

<div class="base" id="one" style="background-color:blue">
    <a class="close" href="#">Close</a>
</div>
<div class="base" id="two" style="background-color:red">
    <a class="close" href="#">Close</a>
</div>
<div class="base" id="three" style="background-color:green">
    <a class="close" href="#">Close</a>
</div>

CSS

.drag{
    width:200px;
    height:20px;
    margin-bottom:5px;
}
.base{
    display:none !important;
}

.drag a{
    color:#000;
}

JavaScript

$(".base").each(function() {
    var elements = $(this).attr("id");
    var storage = localStorage.getItem("#" + elements);
    for (i = 1; i <= storage; i++) {
        $("#" + elements).clone().attr("class", "drag " + elements).attr("id", elements + i).appendTo("body");
    }
});


$(".close").click(function() {
    var id = $(this).closest("div").attr("id");
    var claz = $(this).closest("div").attr("class");
    var omg = $("#" + id).attr("class").split(' ')[1];
    
    $("#" + id).remove();
    var test = localStorage.getItem("#" + omg);
    var test2 = test - 1;
    localStorage.setItem("#" + omg, test2);
     
});





$("a").click(function() {
    var target = $(this).attr("href");
    var id = $(target).attr("id");
    var x = $("." + id).size();
    var click = $(target).data("clicked") || x;
    $(target).data("clicked", ++click);
    var name = id + click;
    $(target).clone().attr("id", name).attr("class", "drag " + id).appendTo("body");
    localStorage.setItem(target, click);
});