TableSorter is not sorting calculation result Columns. Jquery/javascript

I have a TableSorter table which is made with Datatables.net. I added percentage change calculator on it. Both Table sorter and percentage change calculator is working without any problems. Exact Problem is, Calculation result Column, (Calculator 01 Result, & Calculator 02 Result) is not working / not sorting. When I click for sorting, not getting effect/changes. All other columns are working without any problems. I don't understand it's problem. format is wrong? I am wondering. I have made a Codepen page for preview: https://codepen.io/themecode/pen/GRdpmBa . Please solve my problems...

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<style>
.wrap {margin:0 auto; width:999px; padding:1em 0 25em;}
table {border-collapse: collapse;font-family: arial;}
th {border: 1px solid #000;padding: 5px;border-collapse: collapse;font-size: 15px;}
td {border: 1px solid #000;padding: 5px;border-collapse: collapse;font-size: 15px;text-align:center;}
input {margin: 3px 0;border: 1px solid #00f;height: 32px;padding-left: 7px;font-size: 18px;}
</style>
<table id="table-sorter" class="display" style="width:100%">
<thead>
<tr>
    <th>Item</th>
    <th>Price</th>
    <th>Calculator 01</th>
    <th>Calculator 01 Result</th>
    <th>Calculator 02</th>
    <th>Calculator 02 Result</th>
    <th>Net Profit</th>
</tr>
</thead>
<tbody>
<tr>
    <td>Apple</td>
    <td>95</td>
    <td>
      <input type="text" class="change-calculator calc-from" value=""><br />
      <input type="text" class="change-calculator calc-to" value="1000">
    </td>
    <td>
      <h2 class="calc-result"></h2>
    </td>
    <td>
      <input type="text" class="change-calculator calc-from" value=""><br />
      <input type="text" class="change-calculator calc-to" value="2000">
    </td>
    <td>
      <h2 class="calc-result"></h2>
    </td>
    <td>49</td>
</tr>
<tr>
    <td>Kiwi</td>
    <td>145</td>
    <td>
      <input type="text" class="change-calculator calc-from" value=""><br />
      <input type="text" class="change-calculator calc-to" value="1000">
    </td>
    <td>
      <h2 class="calc-result"></h2>
    </td>
    <td>
      <input type="text" class="change-calculator calc-from" value=""><br />
      <input type="text" class="change-calculator calc-to" value="2000">
    </td>
    <td>
      <h2 class="calc-result"></h2>
    </td>
    <td>75</td>
</tr>
<tr>
    <td>Mango</td>
    <td>125</td>
    <td>
      <input type="text" class="change-calculator calc-from" value=""><br />
      <input type="text" class="change-calculator calc-to" value="1000">
    </td>
    <td>
      <h2 class="calc-result"></h2>
    </td>
    <td>
      <input type="text" class="change-calculator calc-from" value=""><br />
      <input type="text" class="change-calculator calc-to" value="2000">
    </td>
    <td>
      <h2 class="calc-result"></h2>
    </td>
    <td>65</td>
</tr>
<tr>
    <td>Banana</td>
    <td>75</td>
    <td>
      <input type="text" class="change-calculator calc-from" value=""><br />
      <input type="text" class="change-calculator calc-to" value="1000">
    </td>
    <td>
      <h2 class="calc-result"></h2>
    </td>
    <td>
      <input type="text" class="change-calculator calc-from" value=""><br />
      <input type="text" class="change-calculator calc-to" value="2000">
    </td>
    <td>
      <h2 class="calc-result"></h2>
    </td>
    <td>25</td>
</tr>
<tr>
    <td>Orange</td>
    <td>89</td>
    <td>
      <input type="text" class="change-calculator calc-from" value=""><br />
      <input type="text" class="change-calculator calc-to" value="1000">
    </td>
    <td>
      <h2 class="calc-result"></h2>
    </td>
    <td>
      <input type="text" class="change-calculator calc-from" value=""><br />
      <input type="text" class="change-calculator calc-to" value="2000">
    </td>
    <td>
      <h2 class="calc-result"></h2>
    </td>
    <td>41</td>
</tr>


</tbody>
<tfoot>
<tr>
    <th>Item</th>
    <th>Price</th>
    <th>Calculator 01</th>
    <th>Calculator 01 Result</th>
    <th>Calculator 02</th>
    <th>Calculator 02 Result</th>
    <th>Net Profit</th>
</tr>
</tfoot>
</table>


<script tyle="text/javascript">
  $(document).on("change keyup blur live", "input", ".change-calculator", e => {
//$(document).on("input change", ".change-calculator", e => {
  let $td = $(e.currentTarget).closest('td');
  let from = Number($td.find('.calc-from').val());
  let to = Number($td.find('.calc-to').val());
  let result = ((to - from) / from) * 100;
  $td.next().find('.calc-result').text(result.toFixed(2));
});
</script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script tyle="text/javascript">
$(document).ready(function () {
    $('#table-sorter').DataTable();
});
</script>