JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sortables">
  <a href='#' id='by_id'>Sort by id</a>
  <a href='#' id='by_author'>Sort by author</a>
  <a href='#' id='by_title'>Sort by title</a>
</div>

<div id="my_list">
  <div data-id='1' data-author='Pushkin'>Fairy Tale</div>
  <div data-id='53' data-author='Tolstoy'>Anna Karenina</div>
  <div data-id='2' data-author='Doyl'>Fairy Tale</div>
  <div data-id='55' data-author='Tarantino'>Kill Bill</div>
  <div data-id='9' data-author='Pushkin'>Fairy Tale</div> 
</div>

JavaScript

$('#sortables').delegate('a', 'click', function() {
    var by = $(this).attr('id').match(/^by_(.*)/i);
    if (by)
    {
      mySort.sort(by[1]);
    }
});

var mySort = {
  
  sortables: {
    'title': {
      method: 'text',
      type: 'alpha'
    },
    'author': {
      method: 'attr',
      val: 'data-author',
      type: 'alpha'
    },
    'id': {
      method: 'attr',
      val: 'data-id',
      type: 'numeric'
    }
  },
  
  sort: function(sortBy)
  {
    if (!mySort.sortables[sortBy]) return;
    var sortedElements = [];
    var sortVal;

    var sort = mySort.sortables[sortBy];
      
    $('#my_list > div').each(function() {
        
      sortVal = $(this)[sort.method](sort.val || null);
      sortedElements.push([this, sortVal]);
    });

    // ">" sorts in ascending order, "<" will sort in descending order.
    sortedElements.sort(function(a, b) {
        var result;
        return (sort.type == 'numeric') ?
            a[1] - b[1] :
            a[1] > b[1];
    });

    // Create a new div to replace the old one with
    var $newDiv = $('<div id="my_list">');

    $(sortedElements).each(function() {
        $newDiv.append(this[0]);
    });

    $('#my_list').replaceWith($newDiv);

  }
};