JSFiddle - React, Tailwind, and code Playground

by Ryan Brackett

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://rmm5t.github.io/jquery-sieve/dist/jquery.sieve.min.js"></script>
<div id="group">

  <div data-group="GROUP A">
    Group A item
  </div>

  <div data-group="GROUP C">
    Group C
  </div>
  <div data-group="GROUP A">
    Another Group A
  </div>
  <div data-group="GROUP B">
    Group B item
  </div>

  <div data-group="GROUP B">
    Group B
  </div>
  <div data-group="GROUP D">
    Group D
  </div>
  <div data-group="GROUP A">
    Another Group A
  </div>  <div data-group="GROUP B">
    Group B
  </div>
  <div data-group="GROUP D">
    Group D
  </div>
  <div data-group="GROUP A">
    Another Group A
  </div>
</div>
<hr/>

JavaScript

$(function($) {
  var $list = $('#group');
  var lists = {};
  var $newLists = $();

  $list.children().each(function() {
    var group = $(this).data('group');
    if (!lists[group]) lists[group] = [];
    lists[group].push(this);
  });

  $.each(lists, function(group, items) {
    var $newList = $('<div class="group"/>').append(items).prepend("<h3>" + group + "</h3>");
    $newLists = $newLists.add($newList);
  });

  $list.replaceWith($newLists);

});