JSFiddle - React, Tailwind, and code Playground

by bstst

HTML

<div id="hue_test_rows_container">

<div id="row_container_1" class="row_container">
	<div id="patch_1_1" xrlab_background="55.829,22.066,12.298" style="background-color: rgb(172, 118, 114);" class="fixed_patch"></div>
	
	<div id="draggable_row_container_1" class="drag_container" overclass="over_drag_container" dropobj="0">
		
		<div id="patch_1_14" xrlab_background="55.044,11.822,34.641" style="background-color: rgb(162, 123, 73);" class="drag_patch" overclass="over_drag_patch" dragclass="drag_patch_drag_box" dragobj="0" origclass="drag_patch"></div>
	
		<div id="patch_1_18" xrlab_background="56.377,3.56,37.274" style="background-color: rgb(154, 131, 71);" class="drag_patch" overclass="over_drag_patch" dragclass="drag_patch_drag_box" dragobj="0" origclass="drag_patch"></div>
	
		<div id="patch_1_7" xrlab_background="53.328,18.697,21.954" style="background-color: rgb(164, 114, 92);" class="drag_patch" overclass="over_drag_patch" dragclass="drag_patch_drag_box" dragobj="0" origclass="drag_patch"></div>
	
		<div id="patch_1_6" xrlab_background="53.603,19.584,19.989" style="background-color: rgb(165, 114, 96);" class="drag_patch" overclass="over_drag_patch" dragclass="drag_patch_drag_box" dragobj="0" origclass="drag_patch"></div>
	
		<div id="patch_1_8" xrlab_background="53.262,18.465,24.212" style="background-color: rgb(164, 114, 88);" class="drag_patch" overclass="over_drag_patch" dragclass="drag_patch_drag_box" dragobj="0" origclass="drag_patch"></div>
	
		<div id="patch_1_9" xrlab_background="53.279,17.775,25.419" style="background-color: rgb(163, 115, 86);" class="drag_patch" overclass="over_drag_patch" dragclass="drag_patch_drag_box" dragobj="0" origclass="drag_patch"></div>
	
		<div id="patch_1_21" xrlab_background="57.737,-1.253,35.756" style="background-color: rgb(149, 137, 76);" class="over_drag_patch" overclass="over_drag_patch" dragclass="drag_patch_drag_box" dragobj="0" origclass="drag_patch"></div>
	
		<div id="patch_1_16"...

CSS

.drag_patch,
.fixed_patch {
    width: 10px;
    height: 10px;
    float: left;
}
.row_container {
    clear: both;
}

JavaScript

$('.row_container').each(function(){
    var $result = $(this).find('.drag_patch').sort(function(a, b){
        return a.id.match(/\d+$/)[0] < b.id.match(/\d+$/)[0];
    });
    $(this).replaceWith($result);
});