JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="sortList('userscontainer','age','asc');">
 sort ascending
</button>
<div id="userscontainer" class="yeshow" data-users="room1">
 <!--user 1 start-->
 <div id="user1" class="userlist-item" style="" data-name="john" data-age="41"> 
  <span class="userlist-name">John</span>
  <!--user 1 profile start-->
  <div class="perfil" id="usercard1">
   <table>
    <tr>
     <td>
      <h2>John</h2>
      <dl>
       <dt>sex:</dt><dd>Male</dd>
       <dt>age:</dt><dd>41</dd>
      </dl>
     </td>
    </tr>
   </table>
  </div>
  <!--user 1 profile end-->
 </div>
 <!--user 1 end-->
 <!--user 2 start-->
 <div id="user2" class="userlist-item" style="" data-name="fanny" data-age="31">
  <span class="userlist-name">Fanny</span>
  <!--user 2 profile start-->
  <div class="perfil" id="usercard2">
   <table>
    <tr>
     <td>
      <h2>Fanny</h2>
      <dl>
       <dt>sex:</dt><dd>Female</dd>
       <dt>age:</dt><dd>31</dd>
      </dl>
     </td>
    </tr>
   </table>
  </div>
  <!--user 2 profile end-->
 </div>
 <!--user 2 end-->
 <!--user 3 start-->
 <div id="user3" class="userlist-item" style="" data-name="sitter" data-age="11">
  <span class="userlist-name">Sitter</span>
  <!--user 3 profile start-->
  <div class="perfil" id="usercard3">
   <table>
    <tr>
     <td>
      <h2>Sitter</h2>
      <dl>
       <dt>sex:</dt><dd>male</dd>
       <dt>age:</dt><dd>11</dd>
      </dl>
     </td>
    </tr>
   </table>
  </div>
  <!--user 3 profile end-->
 </div>
 <!--user 4 start-->
 <div id="user4" class="userlist-item" style="" data-name="ash" data-age="21">
  <span class="userlist-name">Ash</span>
  <!--user 4 profile start-->
  <div class="perfil" id="usercard4">
   <table>
    <tr>
     <td>
      <h2>Ash</h2>
      <dl>
       <dt>sex:</dt><dd>male</dd>
       <dt>age:</dt><dd>21</dd>
      </dl>
     </td>
    </tr>
   </table>
  </div>
  <!--user 4 profile end-->
 </div>
 <!--user 4 end-->
</div>

CSS

.perfil { display: none; position: absolute; right:0; top: -20px; font-size: 9px; }
.userlist-item { position: relative; width: 50%; }
.userlist-item:hover .perfil { display: block; }
.userlist-avatar img, .perfil img { width: 30px; }

JavaScript

function sortList(listid,type,direction){
    var list = document.getElementById(listid);
    var new_list = list.cloneNode(false);
    var typesort = 'dataset'.type;
    var plusone = direction == 'asc' ? 1 : -1;
    var minusone = direction == 'asc' ? -1 : 1;

    // Add all lis to an array
    var elms = [];
    for(var i = list.childNodes.length; i--;){
        if(list.childNodes[i].nodeName === 'DIV')
            elms.push(list.childNodes[i]);
    }
    
    // Sort the lis in descending order
    elms.sort(function(a, b){
     if(a.typesort < b.typesort) return minusone;
     if(a.typesort > b.typesort) return plusone;
     return 0;
    });
    
    // Add them into the ul in order
    for(var i = 0; i < elms.length; i++) {
     new_list.appendChild(elms[i]);
    }
    list.parentNode.replaceChild(new_list, list);
}