Javascript 计算购物车内产品的总成本，并将其显示在底部，而不是手动输入

我制作了一个结账表单，显示产品成本、小计、GST成本、交付成本和总价。我想做的是计算每种产品的成本，这些产品的类别是

class=“price”

（但我假设他们可能需要一个id），然后将它们加在一起得到总数。这一总额将从小计价值加上交付成本的基础上增加15%

这是结帐表（抱歉太长）~有一些样式与此无关，因为它是从网站的某个页面中提取的

在此方面的任何帮助都将不胜感激。我猜他们需要一个id，然后我会使用getElementById来获取值并将它们相加，但我不知道该怎么做

接受的付款方式
全名
电话号码
电子邮件
城市
国家
邮政编码
卡片上的名字
卡号
实验年
CVV
运货马车


AOC C27G2
X

27英寸全高清弧形显示器

分辨率：1920x1080
刷新率：165hz
响应时间：1毫秒
429.00美元（商品及服务税公司）

罗技G402 Hyperion Fury
X

游戏鼠标

运动检测：光学
可编程按钮：8个
手方向：右手
最大DPI:4000
94.89美元（消费税公司）

罗技G332
X

立体声游戏耳机

声音模式：立体声
麦克风：是
接口：3.5mm
颜色：黑色
133.00美元（商品及服务税公司）

GGPC传奇
X

RTX 2070超级游戏PC

CPU:AMD Ryzen 7
GPU:Nvidia RTX 2070 Super
内存：16GB
2413.85美元（商品及服务税公司）
小计
消费税
传送
全部的
$2,753.35
$398.16
$26.97
$3,172.11
结账
身体{
背景色：#4242；
}
.图标容器{
文本对齐：居中；
}
法先生，
.晶圆厂{
字号：3.125em；
}
法心先生{
颜色：#ddd！重要；
}
.fa cc苹果支付{
背景：-webkit线性梯度（45度，rgb（119、119、119）、rgb（255、255、255））；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}
.fa cc万事达卡{
背景：-webkit线性梯度（0度，#ffef00，#ff6f00，#ff0000）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}
.fa cc签证{
背景：-webkit线性梯度（90度，rgb（255，255，0），rgb（255，255，255），rgb（35，38，250））；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}
.fa cc贝宝{
背景：-webkit线性梯度（45度，rgb（0,4255），rgb（0,225,255））；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}
.fa cc亚马逊支付{
背景：-webkit线性梯度（45度，rgb（255，138，4），rgb（255，174，0））；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}
.fa谷歌支付{
背景：-webkit linea
// Get all the elements that have the `.price` class
const prices = document.querySelectorAll(".price");

// convert the nodeList into an array and loop over it
let total = [...prices].reduce((acc, price) => {
    return acc + parseFloat(price.innerHTML);  
}, 0);

<div class='price'>$429.00 (GST Inc)</div>

<div><span>$</span><div class='price'>429.00</div> <span>(GST Inc)</span></div>