jquery sort table by column basis content in cell

Question

I'm trying to sort a table by column according to the content in the 'tbody' first row (tr class='Statistics)'.

Each 'td' in the row has two 'divs' identified by classes that match the values for their respective selection in the sort dropdown. (color coded for ease, as in below image)

The jquery I'm using to activate the sort function is as follows:

jQuery(document).ready(function ($) {

        $("#SortBy").on('change', function() {
            var Column = $(".CompTable tr > td:nth-child(n):not(:first-child), .CompTable tr > th:nth-child(n):not(:first-child)");

            Column.sort(function(a, b) {
                a = $(a).find("tr.Statistics > td:not(:first) div."+jQuery(this).find("option:selected").val());
                b = $(b).find("tr.Statistics > td:not(:first) div."+jQuery(this).find("option:selected").val());

                return (a === 'NA')-(b === 'NA') || -(a>b)||+(a<b);
            })
            jQuery('.divResult').html(Column); // <-- Table nested inside 'div' 
        });
    });

I believe the issue is with this bit of code that I'm using to identify each column, except the 1st, in the table:

var Column = $(".CompTable tr > td:nth-child(n):not(:first-child), .CompTable tr > th:nth-child(n):not(:first-child)");

Please help me with correcting the above code. Currently when I'm selecting a sort option, the table disappears. :/

Below is the entire working code for reference:

jQuery(document).ready(function ($) {

        $("#SortBy").on('change', function() {
        var Column = $(".CompTable tr > td:nth-child(n):not(:first-child), .CompTable tr > th:nth-child(n):not(:first-child)");
            
            Column.sort(function(a, b) {
                a = $(a).find("tr.Statistics > td:not(:first) div."+jQuery(this).find("option:selected").val());
                b = $(b).find("tr.Statistics > td:not(:first) div."+jQuery(this).find("option:selected").val());

                return (a === 'NA')-(b === 'NA') || -(a>b)||+(a<b);
            })
            jQuery('.divResult').html(Column);
        });
    });

.CompTable {
  table-layout: fixed;
  width: 50%;
  position: relative;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  margin: 10px;
  border: 1px solid #222;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div id="SortByDiv">
    Sort by: 
    <select id="SortBy">
        <option></option>
        <option value=Battery style="color: blue">Battery</option>
        <option value=ScreenSize style="color: red">ScreenSize</option>
    </select>
</br></br></br>
    <div class="divResult">
    <table class="CompTable">
    <thead>
        <th>&nbsp;</th>
        <th>Samsung</th>
        <th>Apple</th>
        <th>Motorola</th>
    </thead>
    <tbody>
        <tr class="Statistics">
            <td>Statistics</td>
            <td>
                <div style="display:flex; flex-flow:column-wrap; width: 100%;">
                    <div class="Battery" style="display:flex; color:blue; width: 100%;">3200</div>
                    <div class="ScreenSize" style="display:flex; color:red; width: 100%;">1024</div>
                </div>
            </td>
            <td>
                <div style="display:flex; flex-flow:column-wrap; width: 100%;">
                    <div class="Battery" style="display:flex; color:blue; width: 100%;">NA</div>
                    <div class="ScreenSize" style="display:flex; color:red; width: 100%;">1900</div>
                </div>
            </td>
            <td>
                <div style="display:flex; flex-flow:column-wrap; width: 100%;">
                    <div class="Battery" style="display:flex; color:blue; width: 100%;">4100</div>
                    <div class="ScreenSize" style="display:flex; color:red; width: 100%;">1500</div>
                </div>
            </td>
        </tr>
        <tr class="Color">
            <td>Color</td>
            <td>Blue</td>
            <td>Red</td>
            <td>Black</td>
        </tr>
    </tbody>
    </table>
    </div>

Edit: Corrected the mistake in the jQuery table class name 'CompTable' pointed out as in the comment below.