JSFiddle - React, Tailwind, and code Playground

HTML

<table id="table1">
    <thead>
        <tr>
            <th><a class="header">Sort</a></th>
            <th><a class="header">Sort</a></th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td>
            <select>
                <option value="0"></option>
                <option value="1">Red</option>
                <option value="2">Yellow</option>
            </select>
        </td>
        <td>
            <select>
                <option value="0"></option>
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <select>
                <option value="0"></option>
                <option value="1">Red</option>
                <option value="2">Yellow</option>
            </select>
        </td>
        <td>
            <select id="colors_27">
                <option value="0"></option>
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <select>
                <option value="0"></option>
                <option value="1">Red</option>
                <option value="2">Yellow</option>
            </select>
        </td>
        <td>
            <select id="colors_5">
                <option value="0"></option>
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <select>
                <option value="0"></option>
                <option value="1">Red</option>
                <option value="2">Yellow</option>
            </select>
        </td>
        <td>
            <select id="colors_5">
                <option value="0"></option>
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
        </td>
    </tr>
    <tr id="selection_34">
       ...

JavaScript

$("#table1").on("click", "a", function() {
    $("#table1").find('th a.header').removeClass('headerSortDown, headerSortUp');
    $(this).addClass('headerSortDown');
    $('tbody tr').sort(function(a, b){
      return $(a).find("option:selected").text() > $(b).find("option:selected").text();
    }).appendTo('#table1 tbody')   
    
    
}).on("click", "a.headerSortDown", function() {
    $("#table1").find('th a.header').removeClass('headerSortDown, headerSortUp');
    $(this).addClass('headerSortUp');
    $('tbody tr').sort(function(a, b){
      return $(b).find("option:selected").text() > $(a).find("option:selected").text();  
    }).appendTo('#table1 tbody')    
    
    
}).on("click", "a.headerSortUp", function() {
    $("#table1").find('th a.header').removeClass('headerSortDown, headerSortUp');
    $(this).addClass('headerSortdown');
    $('tbody tr').sort(function(a, b){
      return $(a).find("option:selected").text() > $(b).find("option:selected").text();
    }).appendTo('#table1 tbody')    
});