JSFiddle - React, Tailwind, and code Playground

by charaf11

HTML

<div id='main'>
      <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>
</div>

CSS

.container { border:1px solid red;margin:5px}
.group1{
   color:white;
    background-color:red;
}
.anotherGroup{
    color:white;
    background-color:blue;
}

JavaScript

$('.container').sort(function (a, b) {
  return $(a).find('.terminal').data('price') - $(b).find('.terminal').data('price');
}).each(function (_, container) {
  $(container).parent().append(container);
});

 $("div.container ").sort(function(a,b){
     if ($(this).find('div.anotherGroup')){
    var aa = $(a).find('.terminal').data('price')  ;  
         var bb = $(b).find('.terminal').data('price') ;}
     return parseInt(aa,10)-parseInt(bb);
}).insertAfter('#main')