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 class="group1">Group 1</div>
</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 class="group1">Group 1</div>
</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="group2">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="group2">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 class="group1">Group 1</div>
</div>
</div>

CSS

.container { border:1px solid red;margin:5px}
.group1{
   color:white;
    background-color:red;
}
.group2{
    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);
});

$('#main').append($("div.container ").sort(function(a,b){
   
    var aa = $(a).find("div[class^='group']").attr('class').split('group')  ;  var bb = $(b).find("div[class^='group']").attr('class').split('group');
;
    return parseInt(aa[1],10)-parseInt(bb[1]);
})
);