JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<button class="sort_clients" data-column="name" data-direction="asc">Name</button>
<button class="sort_clients" data-column="age" data-direction="asc">Age</button>
<button class="sort_clients" data-column="room" data-direction="asc">Room</button>

<div class="list">
  <div class="client" data-name="john" data-age="50" data-room="1 Alpha">John, 50, 1 Alpha</div>
  <div class="client" data-name="susan" data-age="80" data-room="2 Beta">Susan, 84, 2 Beta</div>
  <div class="client" data-name="brad" data-age="70" data-room="3 Delta">Brad, 70, 3 Delta</div>
  <div class="client" data-name="margaret" data-age="45" data-room="Romeo 1">Margaret, 45, Romeo 1</div>
  <div class="client" data-name="steph" data-age="75" data-room="Romeo 3">Steph, 75, Romeo 3</div>
  <div class="client" data-name="matt" data-age="65" data-room="Romeo2">Matt, 65, Romeo2</div>
</div>

JavaScript

function clientSort(column,direction)
{
  var $divs = $(".client");

  if (direction=='asc')
  {
  
    var alphaDivs = $divs.sort(function (a, b) {    
      return $(a).data(column).localeCompare($(b).data(column));
    });
    $(".list").html(alphaDivs);
  }
  else
  {
    if (direction=='desc')
    {
      var alphaDivs = $divs.sort(function (a, b) {
        return $(b).data(column).localeCompare($(a).data(column));
      });
      $(".list").html(alphaDivs);
    }
  }
}

$(document).ready(function()
{
  $('.sort_clients').click(function(e)
                           {
    var column = $(this).data('column');
    var direction = $(this).data('direction');
    
    console.log(column + ' ' + direction);
      
    if(direction === 'asc')
    {
      $(this).data('direction', 'desc');
    }
    else
    {
      $(this).data('direction', 'asc');
    }
    clientSort(column,direction);
  });
  
});