Jquery/javascript: невозможно вывести сумму (total) столбца в таблице

---

I am unable to get the required result using the jQuery and I seem cannot figure out what went wrong which I request anyone to please look into the problem and advise/suggest the same. I am open to other suggestions as well.

<div class="w3-container w3-padding-4x w3-indigo">
		<h2>
  		Table Testing
		</h2>
	</div>
	
	<div class="w3-container w3-section w3-pale-green">
		<table class="w3-table-all" id="sum_table" width="300" border="1">
			<tr class="titlerow">
				<th>SN</th>
				<th>DESCRIPTION</th>
				<TH>UNIT</TH>
				<TH>REQD QTY</TH>
				<TH>AVAIL. QTY</TH>
				<TH>RATE</TH>
				<TH>AMOUNT</TH>
				<TH>REMARKS IF ANY</TH>
			</tr>

			<tr>
				<td>1</td>
				<td>Steel</td>
				<td>Ton</td>
				<td>200</td>
				<td><input id="a.qty" type="number" oninput="calculate()" /></td>
				<td><input id="rate" type="number" oninput="calculate()" /></td>
				<td class="rowDataSd"><input id="amt1" type="number" name="amount" /></td>
				<td><input type="text" name=""></td>
			</tr>

			<tr>
				<td>2</td>
				<td>Cement</td>
				<td>Bags</td>
				<td>300</td>
				<td><input id="qty2" type="number" oninput="calculate1()" /></td>
				<td><input id="rate2" type="number" oninput="calculate1()" /></td>
				<td class="rowDataSd"><input id="amt2" type="number" name="amount" /></td>
				<td><input type="text" name=""></td>
			</tr>
			<tr class="totalColumn">
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td class="totalCol"><input type="button" oninput="Calculate2()" name="Calculate"/> TOTAL:</td>
				<td><input type="text" name=""></td>
			</tr>
			
		</table>

<script>
function calculate(){
				var x1 = document.getElementById('a.qty').value;
				var x2 = document.getElementById('rate').value;
				var x3 = document.getElementById('amt1').value;
				var x4 = x1 * x2;
				amt1.value = x4;
			}

			function calculate1() {
				var y1 = document.getElementById('qty2').value;
				var y2 = document.getElementById('rate2').value;
				var y3 = document.getElementById('amt2').value;
				var y4 = y1 * y2;
				amt2.value = y4;

			}

			    var totals = [0];
                    
				$(document).ready(function() {

  				var $dataRows = $("#sum_table tr:not('.totalColumn, .titlerow')");

 				 $dataRows.each(function() {
    			$(this).find('.rowDataSd input').each(function(i) {
     				totals[i] += parseInt($(this).val()) || 0
    				});
  				});
 				$("#sum_table td.totalCol").each(function(i) {
    			$(this).value("total:" + totals[i]);
 				 });

			});
</script>

Результат доступен по этой ссылке для вашего удобства- Image-TinyPic-бесплатный хостинг изображений, обмен фотографиями и видеохостинг[^]

Что я уже пробовал:

Мне удалось вывести умножение каждой строки с помощью функции javascript в столбце "сумма".
Однако я не могу вывести общую сумму столбца "сумма" с помощью функции jQuery, как показано выше.

---