JSFiddle - React, Tailwind, and code Playground

HTML

<div id="all_elements">
    
    <!-- one element -->
    <div class="element">
        <div class="display-number">02</div>
        <div class="year">20-10-2011</div>
    </div><!-- element -->
    
    <!-- one element -->
    <div class="element">
        <div class="display-number">03</div>
        <div class="year">22-09-2011</div>
    </div><!-- element -->
    
    <!-- one element -->
    <div class="element">
        <div class="display-number">01</div>
        <div class="year">01-12-2011</div>
    </div><!-- element -->
    
    <!-- one element -->
    <div class="element">
        <div class="display-number">04</div>
        <div class="year">01-06-2011</div>
    </div><!-- element -->
    
    <!-- one element -->
    <div class="element">
        <div class="display-number">05</div>
        <div class="year">01-06-2010</div>
    </div><!-- element -->
    
</div> <!--all_elements--

JavaScript

function sortDescending(a, b) {
    var date1 = $(a).find(".year").text();
    date1 = date1.split('-');
    date1 = new Date(date1[2], date1[1] - 1, date1[0]);
    var date2 = $(b).find(".year").text();
    date2 = date2.split('-');
    date2 = new Date(date2[2], date2[1] - 1, date2[0]);

    return date1 < date2;
};
$(document).ready(function() {
    $('#all_elements .element').sort(sortDescending).appendTo('#all_elements');
});