JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slideshow">
    <div>a
        <img src="../../img/apple.jpg" />
    </div>
    <div>s
        <img src="../../img/strawberry1.jpg" />
    </div>
    <div>b
        <img src="../../img/bear.jpg" />
    </div>
    <div>b
        <img src="../../img/banana.jpg" />
    </div>
    <div>r
        <img src="../../img/raspberry.jpg" />
    </div>
</div>
<input type='button' value='Rearrange' onclick='rearrange();' />

JavaScript

function rearrange() {
    var elements = $('img');
    var images = elements.map(function () {
        var src = this.src;
        return src.substring((src.lastIndexOf('/') + 1), src.length);
    });
    images.sort();
    console.log(images);
    $.each(images, function (i, v) {
        console.log(v);
        $('#slideshow').append($('img[src*="' + v + '"]').parent());
    });
}