JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<aside id="settings">
    <div class="menu groups">
    <header>
         <div>arrow</div>
         <h3>Groups</h3>
         <div><span>minimize</span></div>
     </header>
     <section>
         <div class="menu groups">
             <header>
                 <div>arrow</div>
                 <h3>Groups</h3>
                 <div><span>minimize</span></div>
             </header>
             <section>
                 <div>
                     <span id="addGroup"><span>Add group</span></span>
                     <span id="delGroup"><span>Del group</span></span>
                 </div>
                 <ul>
                     <li><span></span><pre>Group and theeeen....</pre></li>
                     <li><span></span><pre>Group another group</pre></li>
                     <li ><span></span><pre>Group 3</pre></li>
                     <li><span></span><pre>Group helllooo</pre></li>
                     <li><span></span><pre>Group wasup homeboys</pre></li>
                     <li><span></span><pre>Group 3wfwfwf</pre></li>
                 </ul>
                 <div class="gr">
                    <input type="text" value="Group's name..."/>
                     <span>add</span>
                 </div>
                 <div class="rmv">
                     <div></div>
                     <span class="remove">Remove selected</span>
                 </div>
             </section>
         </div>       
    </section> 
    </div>
</aside>
</body>

CSS

body {
    font:normal normal normal 62.5%/16px Arial, Helvetica, sans-serif;
}

span#addGroup,span#delGroup,

div.ui-dialog.rmv div.rmv span.remove,
aside#settings div.groups ul li span{
    cursor:pointer;
}



div.groups ul:after,
div.groups section div:first-child:before,
div.groups section div:first-child:after{
    height:0;
    clear:both;
    content:'.';
    line-height:0;
    display:block;    
    visibility:hidden;
}

aside#settings div.groups{
    margin:24px;
}

    aside#settings{
        z-index:1;
        float:left;
        width:234px;
        height:100%;
        position:relative;
        background-color:#eee;
        border-right: 1px solid #7e7e7e;
    }



    aside#settings div.menu{
        /*padding:1px;*/
        margin: 4px auto;
        width: 196px;
        position:relative;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
    }

aside#settings div.groups header{
    visibility:hidden;
}

aside#settings div.groups section{
    height: 110px;
}

aside#settings div.groups ul li{
    float: left;
    text-align: center;
    margin: 0 0 4px 0;
    height:76px;
    overflow:hidden;
}
aside#settings div.groups ul li pre{
    max-width:52px;
    margin: 2px 0;
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;      /* IE 5+ */
    font-family: Halvetica, Arial, sans-serif;
}
aside#settings div.groups ul li span{
    width:48px;
    height: 48px;
    display: block;
    margin: 4px 2px;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border: 1px solid #b0cfe6;        
    background: #ccc;
}
aside#settings div.groups ul li span:hover{
   ...

JavaScript

jQuery(function() {
    var side = jQuery('aside#settings');

    addRemoveGroups(side);
    expandGroups(side);
});

function addRemoveGroups(side) {
    var cont = jQuery('div.groups section', side),
        gr = jQuery('div.gr', cont),
        rmv = jQuery('div.rmv', cont),
        sel = jQuery('select', rmv),
        ul = jQuery('ul', cont);


    gr = gr.clone();
    rmv = rmv.clone();

    jQuery('span#addGroup').click(function() {
        gr.dialog({
            modal: true,
            open: function() {
                jQuery('div.ui-dialog').addClass('gr').removeClass('rmv clone');
                jQuery('div.ui-dialog.gr span.ui-icon-closethick').text('cancel');
            },
            beforeClose: function() {
                inp.val('Group\'s name...');
            }
        });


        var add = jQuery('span', gr),
            inp = jQuery('input', gr),
            name, patt = '';
        inp.select();
        inp.click(function() {
            inp.val('');
        });


        add.click(function() {
            name = inp.val();
            patt = '<li><span></span><pre>' + name + '</pre></li>';
            if (name !== '' && name !== 'Group\'s name...') {
                ul.append(patt);
                gr.dialog('close');
                gr.remove();
                inp.val('Group\'s name...');
            }
        });
    });

    var markedForDel = {
        a: [],
        b: []
    };


    var newlist = null;
    var groups = null;
    var added = 0;

    jQuery('span#delGroup').click(function() {
        newlist = ul.clone();
        groups = jQuery('li', newlist);

        groups.click(function() {
            var that = jQuery(this),
                groups = jQuery('li', newlist),
                index = groups.index(that),
                li = jQuery('ul li', cont);
            //alert(index);
            if (that.hasClass('marked')) {
                that.removeClass('marked');
                added--;
            }
           ...