JSFiddle - React, Tailwind, and code Playground

by Neo Aptt

HTML

<div class='pinned'></div>
<div class='unpinned'>
    <div class="folder_content" id='1'>
        <div class="folder_name">Folder 1</div>
        <button class='pin'>Pin</button>
        <div class="folder_extra">
            <ul class="modules">
                <li>action 1</li>......
                <li>action X</li>
            </ul>
        </div>
    </div>
    <div class="folder_content" id='2'>
        <div class="folder_name">Folder 2</div>
        <button class='pin'>Pin</button>
        <div class="folder_extra">
            <ul class="modules">
                <li>action 1</li>......
                <li>action X</li>
            </ul>
        </div>
    </div>
    <div class="folder_content" id='3'>
        <div class="folder_name">Folder 3</div>
        <button class='pin'>Pin</button>
        <div class="folder_extra">
            <ul class="modules">
                <li>action 1</li>......
                <li>action X</li>
            </ul>
        </div>
    </div>
    <div class="folder_content" id='4'>
        <div class="folder_name">Folder 4</div>
        <button class='pin'>Pin</button>
        <div class="folder_extra">
            <ul class="modules">
                <li>action 1</li>......
                <li>action X</li>
            </ul>
        </div>
    </div>
</div>

CSS

.pinned, .unpinned {
    border:black solid 1px;
}

JavaScript

var folders_array = [];
$('.pin').attr('data-pinned', false);
$('.folder_content').each(function () {
    folders_array.push($(this));
});
$(function(){
    pinned = $('.pinned');
for(var i = 0, l = folders_array.length; i < l; i++){
    console.log(folders_array[i].find('pin').data('pinned'));
    pinned.append(folders_array[i]);
}
});
$('.pin').click(function () {
    var file = $(this).closest('.folder_content');
    var bool = !$(this).data('pinned');
    changePin($(this), file, bool);
});

function changePin(element, container, bool) {
    element.data('pinned', bool);
    if (bool) {
        element.text('Unpin');
        container.prependTo('.pinned');
    } else {
        element.text('Pin');
        container.prependTo('.unpinned');
    }
}

function getSorted(selector, attrName) {
    return $($(selector).toArray().sort(function (a, b) {
        var aVal = parseInt(a.getAttribute(attrName)),
            bVal = parseInt(b.getAttribute(attrName));
        return aVal - bVal;
    }));
}