JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="terminal" data-price="195">
         <h3>195</h3>

    </div>195 - I should come in 2nd in group 1 which is displayed first.</div>
<div class="container">
    <div class="terminal" data-price="220">
         <h3>220</h3>

    </div>220 - I should come in 3rd in group 1 which is displayed first.</div>
<div class="container">
    <div class="terminal" data-price="740">
         <h3>740</h3>

    </div>740 - I should come in 2nd in group 2 which is displayed last.
    <div class="anotherGroup">Group 2</div>
</div>
<div class="container">
    <div class="terminal" data-price="140">
         <h3>140</h3>

    </div>140 - I should come in 1st in group 2 which is displayed last.
    <div class="anotherGroup">Group 2</div>
</div>
<div class="container">
    <div class="terminal" data-price="130">
         <h3>130</h3>

    </div>130 - I should come in 1st in group 1 which is displayed first.</div>

CSS

.container {
    border:1px solid red;
    margin:5px
}

JavaScript

var _count = 0;
    $('.terminal').sort(function (a, b) {
        return $(a).data('price') - $(b).data('price');
    }).map(function () {
        return $(this).closest('.container');
    }).each(paint);
    
    function paint(_, container) {
        if ($(container).children('.anotherGroup')[0]) {
            $(container).parent().append(container);
        } else {
            var next = paint.next;
            if (next) {
                $(container).insertAfter(next);
            } else {
                $(container).parent().prepend(container);
            }
            paint.next = container;
        }
    };