JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<div id="scroller">
  <ul>
    <li class="page" id="page3" data-link="page 3">data 3</li>
    <li class="page" id="page4" data-link="page 4">data 4</li>
    <li class="page" id="page1.1" data-link="page 1">data 1</li>
    <li class="page" id="page1.2" data-link="page 1">data 1</li>
    <li class="page" id="page2.1" data-link="page 2">data 2</li>
    <li class="page" id="page2.2" data-link="page 2">data 2</li>
  </ul>
</div>

JavaScript

function sortULbyID(id) {
  $(id + ' li').sort(function(a, b) {
    return parseFloat($(a).attr("id").replace('page', '')) > parseFloat($(b).attr("id").replace('page', ''));
  }).appendTo(id + ' ul');
}

sortULbyID('#scroller')