JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="allItems">
    <li rel="a_1">1</li>
    <li rel="a_2">2</li>
    <li rel="a_3">3</li>
    <li rel="a_4">4</li>
    <li rel="a_5">5</li>
    <li rel="a_6">6</li>
    <li rel="a_7">7</li>
    

</ul>

<br class="push">


<div>
<ul id="myToolbar">
</ul>
    <p id="edit">Customize the toolbar</p>
</div>

<p id="logger"></p>

CSS

li {
    font-size:10px;
    height:45px;
    width:45px;
    float:left;
    border-radius:15px;
    padding:5px;
    box-shadow:1px 1px 1px #333;
    margin:15px;
    padding:2px;
}

li[rel="a_1"]{background-color:cyan}
li[rel="a_2"]{background-color:green}
li[rel="a_3"]{background-color:lime}
li[rel="a_4"]{background-color:yellow}
li[rel="a_5"]{background-color:orange}
li[rel="a_6"]{background-color:red}
li[rel="a_7"]{background-color:purple}
li[rel="a_8"]{background-color:blue}


#allItems{
    
    display:none;
}

#allItems li{
cursor:move;}

#myToolbar {
height:60px;
border:1px solid black;  
}

.tmp{
    height:46px;
    width:46px;
    border:2px dashed grey;
    float:left;
    box-shadow:none;
    padding:0px;

}

.ui-draggable-dragging{
/*opacity:0.5;*/
}

.delete_16{
position:relative;
top:-7px;
left:-7px;
    width:16px;
    height:16px;
background-image:url('http://icons.iconarchive.com/icons/dryicons/simplistica/16/delete-icon.png');
background-repeat:no-repeat;
background-color:transparent;
}

.push{
display:block;
clear:both;
height:0;}

li{
margin:5px;}

JavaScript

/**
 * jQuery Cookie plugin
 *
 * Copyright (c) 2010 Klaus Hartl (stilbuero.de)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 */
jQuery.cookie = function (key, value, options) {

    // key and at least value given, set cookie...
    if (arguments.length > 1 && String(value) !== "[object Object]") {
        options = jQuery.extend({}, options);

        if (value === null || value === undefined) {
            options.expires = -1;
        }

        if (typeof options.expires === 'number') {
            var days = options.expires, t = options.expires = new Date();
            t.setDate(t.getDate() + days);
        }

        value = String(value);

        return (document.cookie = [
            encodeURIComponent(key), '=',
            options.raw ? value : encodeURIComponent(value),
            options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
            options.path ? '; path=' + options.path : '',
            options.domain ? '; domain=' + options.domain : '',
            options.secure ? '; secure' : ''
        ].join(''));
    }

    // key and possibly options given, get cookie...
    options = value || {};
    var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
    return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};

/**
* Fine Cookie Plugin
*/


/** SETTINGS **/
var itemSelected;
var editMode=false;
var txt='';




/** FUNCTIONS **/
function reArrange(){
    
    $('#allItems br').remove();  
    $('#allItems li:nth-child(4n)').after('<br class="push">');
    $('#allItems li').draggable({
        connectToSortable: '#myToolbar',
        placeholder: 'tmp',
        helper: 'clone',
        snap: 'true',
        opacity: 0.35,
        revert:'invalid', 
        start:...