JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html dir="ltr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="http://tinysort.sjeiti.com/scripts/jquery.tinysort.js"></script>
   
      
  </head>
  <body>
<ul id="late-services" class="list">
<li data-service-id="23" data-criticality="1000">
    <span>Service 83</span>
    <span class="list-collapse ui-icon ui-icon-carat-1-s"></span>
    <span class="service-zone">Cannes</span>
    <div class="list-item-belly" style="display: none;">
        <div>Deadline dans 1 semaine.</div>
        <div>Le client n'a pas confirmé.</div>
    </div>
</li>
<li data-service-id="22" data-criticality="2000">
    <span>Service 22</span>
    <span class="list-collapse ui-icon ui-icon-carat-1-s"></span>
    <span class="service-zone">Cannes</span>
    <div class="list-item-belly" style="display: none;">
        <div>Deadline dans 1 semaine.</div>
        <div>Le client n'a pas confirmé.</div>
    </div>
</li>
<li data-service-id="24" data-criticality="500">
    <span>Service 24</span>
    <span class="list-collapse ui-icon ui-icon-carat-1-s"></span>
    <span class="service-zone">Cannes</span>
    <div class="list-item-belly" style="display: none;">
        <div>Deadline dans 1 semaine.</div>
        <div>Le client n'a pas confirmé.</div>
    </div>
</li>               
</ul>
      
      
    </body>
</html>

JavaScript

$('ul#late-services>li').tsort({attr:'data-service-id'});