Общая сумма в калькуляторе продуктов на JavaScript

Давайте теперь сделаем так, чтобы под таблицей выводилась общая сумма покупок. Тут есть нюансы.

Если обдумать ситуацию, то станет понятно, что сумма должна корректироваться не только при добавлении новой покупки, но также и при удалении и при редактировании.

Я бы предложил в таком случае сделать некоторую функцию, назовем ее recountTotal, которая будет выполнять полный перерасчет суммы. То есть будет пробегаться циклом по всем покупкам и суммировать содержимое их колонки cost.

Имея такую функцию, мы сможем вызывать ее в любом месте, где предполагаются какие-то изменения общей суммы. Конечно, немного не оптимально каждый раз рассчитывать общую сумму. Зато мы получим существенное упрощение кода.

Используем предполагаемую функцию при создании новой покупки:

add.addEventListener('click', function() {
	let tr = document.createElement('tr');
	
	createCell(tr, name.value, 'name');
	createCell(tr, price.value, 'price');
	createCell(tr, amount.value, 'amount');
	createCell(tr, price.value * amount.value, 'cost');
	createCell(tr, 'удалить', 'remove');
	
	table.appendChild(tr);
	recountTotal(); // пересчитаем общую сумму
});

Вот заготовка описанной функции:

function recountTotal() {
	let costs = table.querySelectorAll('.cost');
	
	if (costs) {
		// находим сумму и записываем ее в #total
	}
}

Реализуйте описанную мною функцию recountTotal.