JSFiddle - React, Tailwind, and code Playground

HTML

<div class="column">
    <a href="#" class="sort">Sort by data-value (asc)</a>
    
    <div class="boxes">
        <div data-value="0" class="box">A</div>
        <div data-value="2" class="box">B</div>
        <div data-value="0" class="box">C</div>
        <div data-value="0" class="box">D</div>
        <div data-value="0" class="box">E</div>
        <div data-value="0" class="box">F</div>
        <div data-value="0" class="box">G</div>
        <div data-value="0" class="box">H</div>
        <div data-value="0" class="box">I</div>
        <div data-value="0" class="box">J</div>
        <div data-value="0" class="box">K</div>
        <div data-value="0" class="box">L</div>
    </div>
</div>

<div class="column">
    <a href="#" class="sort2">Sort by data-value (asc)</a>
    
    <div class="boxes2">
        <div data-value="0" class="box">A</div>
        <div data-value="2" class="box">B</div>
        <div data-value="0" class="box">C</div>
        <div data-value="0" class="box">D</div>
        <div data-value="0" class="box">E</div>
        <div data-value="0" class="box">F</div>
        <div data-value="0" class="box">G</div>
        <div data-value="0" class="box">H</div>
        <div data-value="0" class="box">I</div>
        <div data-value="0" class="box">J</div>
    </div>
</div>

CSS

.column {width: 50%; float: left;}
.box { border: 1px solid #000; padding: 5px;width: 50px;text-align: center;}
a { display: block; background: #000; color: #fff; padding: 3px 10px; width: 200px; margin-bottom: 30px;text-decoration: none;text-align: center;}

JavaScript

$(function(){
        $('.sort').click(function(e) {
            var $boxes = $('.boxes');
            var $box = $boxes.find('.box');

            $box.sort(function(a,b){
                
                var an = parseInt(a.getAttribute('data-value')),
                    bn = parseInt(b.getAttribute('data-value'));
        
                return an - bn;
            });

            $box.detach().appendTo($boxes);
        });
    
    
        $('.sort2').click(function(e) {
            var $boxes = $('.boxes2');
            var $box = $boxes.find('.box');

            $box.sort(function(a,b){
                
                var an = parseInt(a.getAttribute('data-value')),
                    bn = parseInt(b.getAttribute('data-value'));
        
                return an - bn;
            });

            $box.detach().appendTo($boxes);
        });
    });