JSFiddle - React, Tailwind, and code Playground

JavaScript

var str1 = "<script>  var i, len, sortedChildren;  sortedChildren = $('.rows').children().sort(function (a, b) {    return $(a).data('rank') < $(b).data('rank') ? -1 : 1;  });  for (i = 0, len = sortedChildren.length; i < len; i++) {    child = sortedChildren[i];    $('.rows').append(child);  }</scr"+"ipt><div class='rows'>  <div id='3' data-rank='3'>    Three    <script>$('#3').css('color', 'red');</scr"+"ipt>  </div>  <div id='2' data-rank='2'>     Two    <script>$('#2').css('color', 'green');</scr"+"ipt>  </div>  <div id='1' data-rank='1'>    One    <script>$('#1').css('color', 'blue');</scr"+"ipt>  </div></div>";

$('body').append(str1);

var str2 = "<div class='rows'>  <div id='13' data-rank='3'>    Three    <script>$('#13').css('color', 'red');</scr"+"ipt>  </div>  <div id='12' data-rank='2'>     Two    <script>$('#12').css('color', 'green');</scr"+"ipt>  </div>  <div id='11' data-rank='1'>    One    <script>$('#11').css('color', 'blue');</scr"+"ipt>  </div></div>";

$('body').append(str2);