JSFiddle - React, Tailwind, and code Playground

HTML

<button class="langButton" id="sblood" data-language="ethnicity"> ethnicity </button>
<button class="langButton" id="sgroup" data-language="gender"> gender </button>
<button class="langButton" id="scanon" data-language="pet">pet</button>
<button class="langButton" id="sability" data-language="subject"> subject </button>
<br><br><br>

<div id="sortThis">
        <div class="person">
          John
            <div class="article ethnicity">chinese</div>
            <div class="article gender">male</div>
            <div class="article pet">duck</div>
            <div class="article subject">history</div>
        </div>

        <div class="person">
          Lucy
            <div class="article ethnicity">indian</div>
            <div class="article gender">female</div>
            <div class="article pet">dog</div>
            <div class="article subject">maths</div>
        </div>

        <div class="person">
            David
            <div class="article ethnicity">irish</div>
            <div class="article gender">male</div>
            <div class="article pet">chicken</div>
            <div class="article subject">english</div>
        </div>

        <div class="person">
            Tony
            <div class="article ethnicity">scottish</div>
            <div class="article gender">male</div>
            <div class="article pet">hamster</div>
            <div class="article subject">geography</div>
        </div>

        <div class="person">
            Kim
            <div class="article ethnicity">romanian</div>
            <div class="article gender">female</div>
            <div class="article pet">fish</div>
            <div class="article subject">chemistry</div>
        </div>

        <div class="person">
            Mary
            <div class="article ethnicity">turkish</div>
            <div class="article gender">female</div>
            <div class="article pet">none</div>
            <div class="article subject">maths</div>
       ...

CSS

.person {
    width:150px;
    padding:10px;
    margin:0 0 10px 10px;
    background:#fff;
    border:1px solid #000;
  }
.person div {
border-top:1px solid #aaa;
}

JavaScript

$(function() {

   var $articles = $('.article');

   $(".langButton").click(function(){
       var language = $(this).attr("data-language");
       $articles.hide();                  // Hide them all
       $("."+ language ).show(); // than show the needed ones
   });

});
    
    
    function sortUsingNestedText(parent, childSelector, keySelector) {
      var items = parent.children(childSelector).sort(function(a, b) {
          var vA = $(keySelector, a).text();
          var vB = $(keySelector, b).text();
          return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
      });
      parent.append(items);
    }
    
    $('#sEthnicity').data("sortKey", "span.article ethnicity");
    $('#sGender').data("sortKey", "span.article gender");
    $('#sPet').data("sortKey", "span.article pet");
    $('#sSubject').data("sortKey", "span.article subject");
    
    $("button.langButton").click(function() {
     sortUsingNestedText($('#sortThis'), "div", $(this).data("sortKey"));
    });