JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
  

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jqc-1.12.4/dt-1.10.20/b-1.6.1/sl-1.3.1/datatables.js"></script>

</head>
<body>

<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Product</th>
                <th>Sum</th>
                <th>Location A</th>
                <th>Location B</th>
                <th>Location C</th>
                <th style="display: none"></th>
                <th style="display: none"></th>
                <th style="display: none"></th>
            </tr>
            <tr>
              <th></th>
              <th></th>
              <th>
                <select class="locSel" id="locA">
                  <option value="100">100 %</option>
                  <option value="75">75 %</option>
                  <option value="50">50 %</option>
                  <option value="25">25%</option>
                </select>
              </th>
              <th>
                <select class="locSel" id="locB">
                  <option value="100">100 %</option>
                  <option value="75">75 %</option>
                  <option value="50">50 %</option>
                  <option value="25">25%</option>
                </select>
              </th>
              <th>
                <select class="locSel" id="locC">
                  <option value="100">100 %</option>
                  <option value="75">75 %</option>
                  <option value="50">50 %</option>
                  <option value="25">25%</option>
                </select>
              </th>
              <th style="display: none"></th>
              <th style="display: none"></th>
              <th style="display: none"></th>
          </tr>
        </thead>
        <tbody>
            <tr>
                <td>ProductA</td>
                <td class="sum"></td>
...

CSS

.sum{
  background-color: #D8D8D8;
}

th {
  background-color: #BDBDBD;
}

JavaScript

function calcAverages(table) {
   	table.rows().every( function (rowIdx, tableLoop, rowLoop) {
      	  var data = this.data();
        	data.Sum = ( $('#locA').val()/100 * data.LocationA_dbval ) +
                		 ( $('#locB').val()/100 * data.LocationB_dbval ) +
                		 ( $('#locC').val()/100 * data.LocationC_dbval );
          data.LocationA = $('#locA').val()/100 * data.LocationA_dbval;
          data.LocationB = $('#locB').val()/100 * data.LocationB_dbval;
          data.LocationC = $('#locC').val()/100 * data.LocationC_dbval;
          this.data(data);
      } );
      table.draw();
}

$(document).ready( function () {
    var table = $('#example').DataTable( {
    	columns: [
        {   data: "Product" },
        {   data: "Sum"     },
        {   data: "LocationA",
        		orderable: false   },
        {   data: "LocationB",
            orderable: false	 },
        {   data: "LocationC",
            orderable: false   },
        {   data: "LocationA_dbval"  },
        {   data: "LocationB_dbval"  },
        {   data: "LocationC_dbval"  }
    	],
      initComplete: function () {
 				calcAverages( this.api() );
      }
    } );
 
    $('.locSel').change(function() {
     	calcAverages( table );
    } );
    
} );