JSFiddle - React, Tailwind, and code Playground

HTML

<table><tr class=""><!----> <td id="arrow-cell-1-308" class="arrow open"><!----></td> <td id="skuTitle-cell-1-308"><span>
        BONDAJ
      </span></td><td id="title-cell-1-308"><span>
        Бондаж
      </span></td><td id="amount-cell-1-308"><span>
                  7
                </span></td><td id="sellPrice-cell-1-308"><span>
        3487.00
      </span></td><td id="purchasePrice-cell-1-308"><span>
        1657.00
      </span></td><td id="sellerProfit-cell-1-308"><span>
        3487.00
      </span></td><td id="withdrawnProfit-cell-1-308"><span>
        1397.00
      </span></td><td id="commission-cell-1-308"><span>
        877.00
      </span></td></tr></table>

JavaScript

const rows = document.querySelectorAll('table tr')
rows.forEach(row => {
  const profit = getVal(row, 'sellerProfit'),
        price = getVal(row, 'purchasePrice'),
        result = profit + price;
        
  const newCell = `<td id="roi-cell-1-308"><span>
        ${result}
      </span></td>`
  
  row.insertAdjacentHTML('beforeend', newCell)
})

function getVal(row, idPart) {
  return parseFloat(row.querySelector(`td[id^="${idPart}"] span`).textContent.trim())
}