JSFiddle - React, Tailwind, and code Playground
HTML
<div data-sort="7.5">7.5</div>
<div data-sort="3.2">3.2</div>
<div data-sort="2.15">2.15</div>
<div data-sort="-1.78">-1.78</div>
<div data-sort="-2.39">-2.39</div>
<p><label>data-sort:<input type="text" id="sort"></label></p>
<p><input type="button" id="add" value="Add div"></p>
<p><input type="button" id="addbatch" value="Add batch"></p>
JavaScript
var data = "<div data-sort=\"5\">5</div><div data-sort=\"-3\">-3</div>";
$(document).ready(function () {
$("#add").click(function () {
var sortval = parseFloat($("#sort").val());
var last = true;
$("div").each(function(){
if ($(this).data("sort") < sortval) {
$(this).prepend("<div data-sort=\"" + sortval + "\">" + sortval + "</div>");
last = false;
return false;
}
});
if(last) {
$("div").last().append("<div data-sort=\"" + sortval + "\">" + sortval + "</div>");
}
});
$("#addbatch").click(function () {
$(data).each(function(){
var $adiv = $(this);
var sortval = parseFloat($adiv.data("sort"));
console.log(sortval);
var last = true;
$("div").each(function(){
if ($(this).data("sort") < sortval) {
$(this).prepend($adiv);
last = false;
return false;
}
});
if(last) {
$("div").last().append($adiv);
}
});
});
});