Datatables rendering needed for sorting live price changes

I am trying to make a live crypto currency price change percentage calculator with jquery and javascript. I need to display it in a table sort plugin for sorting purpose. I found a good sorting table for it. https://datatables.net/examples/advanced_init/stocks.html . Here all live changes is always sorting automatically. I dont know how to add my custom HTML in this plugin. I think rendering needed for it. Unfortunately, I don't know how to do rendering on datatables. You can see live working preview of my project from this codepen page: https://codepen.io/themecode/pen/PoeZLWo . Here you can see first table cell <td> is reprecenting for percentage calculator and second table cell <td> is representing it's live result. Please help me..

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> 
   <table>
        <tr>
        <td class="td-none">
<input type="text" class="change-calculator calc-from" value="18000">
<input type="text" id="btc-price" class="dsp-fxd-two change-calculator calc-to" value="">
        </td>
        <td><input type="text" class="calc-result"></td>
        <td>
        </tr>
        <td class="td-none">
<input type="text" class="change-calculator calc-from" value="55">
<input type="text" id="ltc-price" class="dsp-fxd-two change-calculator calc-to" value="">
        </td>
        <td><input type="text" class="calc-result"></td>
        <td>
        </tr>
    </table>

Javascript/Jquery 01

<script type="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));
  $td.next().find('.calc-result').val(result.toFixed(2));
  //$td.next().find('.calc-result').val(result.toFixed(2));
  //$('.result05').val(Number(multiply).toFixed(2));
});
</script>

Javascript/Jquery 02

<script type="text/javascript">
const streams =  {
  'btcusdt@trade': { name: 'btc', input: document.getElementById('btc-price') },
  'ltcusdt@trade': { name: 'ltc', input: document.getElementById('ltc-price') },
};

const streamParams = Object.entries(streams).map(([streamId]) => streamId).join(`/`);
const streamUrl = `wss://stream.binance.com:9443/stream?streams=${streamParams}`;
const wss = new  WebSocket(streamUrl);

wss.onmessage = (event) => {
  const eventData = JSON.parse(event.data);
  const streamId = eventData.stream;
  
  const latestPrice = Number.parseFloat(eventData.data.p);
  const lastPrice = streams[streamId].lastPrice || latestPrice;
  
  // compare latest and last prices
  const inputClass = latestPrice > lastPrice
    ? 'inc'
    : latestPrice < lastPrice ?
      'dec' : '';
  
  // update relevant input with value 
  const input = streams[streamId].input;

  // remove any existing classes
  input.classList.remove('inc','dec');
  
  // add inc/dec class only
  if (inputClass)
    input.classList.add(inputClass);

  // set input value
  input.value = latestPrice.toFixed(2);
  
  // save the latest price for this coin.
  streams[streamId].lastPrice = latestPrice;
  
  // Call calculators.change() here - I can't actually add it because it will break the snippet.
  // calculators.change;
  $('.change-calculator').change();
};
</script>