JSFiddle - React, Tailwind, and code Playground

by Tom DeBerardine

HTML

<button>Bubble Sort</button>
<div id="to-sort">
    <div id="1">
        <p>55</p>
    </div>
    <div id="2">
        <p>90</p>
    </div>
    <div id="3">
        <p>33</p>
    </div>
    <div id="4">
        <p>21</p>
    </div>
    <div id="5">
        <p>80</p>
    </div>
    <div id="6">
        <p>111</p>
    </div>
    <div id="7">
        <p>11</p>
    </div>
</div>

JavaScript

function doSort() {
    var $divs = $('#to-sort').children(),
        arr = [];

    if ($divs.length) {
        $divs.each(function (k, v) {
            arr.push(parseInt($(v).find('p').text(), 10));
        });

        var sorted = arr.sort(function (a, b) {
            return a - b;
        });

        var timing = 200;
        $divs.each(function (k, v) {
            setTimeout(function () {
                $(v).find('p').fadeOut(500, function () {
                    $(v).find('p').text(sorted[k]).fadeIn(500);
                });
            }, 500 + timing);
            timing += 200;
        });
    }
}

$('button').click(doSort);