JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cnt"><a href="#">CLEAR localStorage</a></div>
<a href="#one" data-id="one">one</a>
<a href="#two" data-id="two">two</a>
<a href="#three" data-id="three">three</a>
<br />

<div class="base" data-id="one" style="background-color:blue">
    <a class="close" href="#">Close</a>
    this is the first div.
    
</div>
<div class="base" data-id="two" style="background-color:red">
    <a class="close" href="#">Close</a>
    this is some stuff. Just want to see what happens when text is acutally within the div. 
</div>
<div class="base" data-id="three" style="background-color:green">
    <a class="close" href="#">Close</a>
    This too interest me.  Will the link cause the page to jump when a tab is selected. We shall see. 
</div>

CSS

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

.drag a{
    color:#000;
}

JavaScript

$('a[data-id]').click ( function() {
   var id = $(this).data('id');
   var key = 'counter-' + id;
   var counter = localStorage.getItem ( key ) || 0;

    counter++;

   var template = $('div.base[data-id="' + id + '"]' );
   var newElement = template.clone();
   
   newElement.find('a').append ( '<i> id="' + id + counter + '"</i>' );   
   newElement.attr ('id', id + counter );
   newElement.removeClass('base').appendTo ( 'body' ).addClass('active');
   
   var active = [];
    $('div.active[data-id="' + id + '"]').each ( function() {
        active.push ( $(this).data('id') + ',' + $(this).attr('id') );
    });        
   active = active.join(" ");

   localStorage.setItem (id + '-active', active );
   localStorage.setItem ( key, counter );
//    $('#cnt').text ( key + ' = ' + counter );
});

$('a.close').live('click', function() {
   var id = $(this).parent().data('id');

   $(this).parent().remove();
   var active = [];

    $('div.active[data-id="' + id + '"]').each ( function() {
        active.push ( $(this).data('id') + ',' + $(this).attr('id') );
    });        

   active = active.join(" ");
   localStorage.setItem (id + '-active', active );   
});
    
$('div.base').each ( function() {
   var id = $(this).data('id');   
   var counter = localStorage.getItem ( 'counter-' + id ) || 0;
   var active = localStorage.getItem(id + '-active') || '';

   $.each (active.split(' '), function(k,v) {
      var v = v.split(',');
      if (v.length != 2) return;
      var template = $('div.base[data-id="' + v[0] + '"]' );
      var newElement = template.clone();
      newElement.find('a').append ( '<i> id="' + v[1] + '"</i>' );   
      newElement.attr('id', v[1]).data('id', id);   
      newElement.removeClass('base').addClass('active').appendTo ( 'body' );      
   });

});   

$('div#cnt').click ( function() { 
    $('div.base').each ( function() {
      var id = $(this).data('id');   
      var counter = localStorage.setItem ( 'counter-' + id, 0 ) || 0;
     ...