datasetの配列の使い方がよくわからない問題

以下のプログラムは、ボタンが押されたら値が加算され、もう一度同じボタンが押されたらその値を減算するプログラムなのですが、なぜこのプログラムで上手くいくのかわからないのでアドバイスをお願い致します。

また、HTMLのclassやidに'val'がないのになぜエラーにならないのでしょうか？
というか、costs.dataset['val']の意味が調べてもよくわからないので教えていただけると助かります。。。

HTML
1<div class="center fixed_cost"><span class="sum">0</span>円</div>
2
3        <div class="container">
4          <button type="button" class="buttons">家賃<br>
5            <span class="costs">80,000</span>円
6          </button>
7          <button type="button" class="buttons">光熱費<br>
8            <span class="costs">5,000</span>円
9          </button>
10          <button type="button" class="buttons">水道代<br>
11            <span class="costs">5,000</span>円
12          </button>
13以下省略

JavaScript
1// ボタンが押された時の値を変更
2function TotalCost() {
3    const sum = document.querySelector('.sum');
4    const btns = document.querySelectorAll('.buttons');
5
6    btns.forEach(costs => {
7        costs.dataset['val'] = costs.querySelector('.costs').innerHTML.replace(",","");
8
9        costs.addEventListener('click', () => {
10            let val = parseInt(costs.dataset['val']);
11            console.log(val);
12
13            sum.innerHTML = (parseInt(sum.innerHTML.replace(",","")) + val).toLocaleString();
14            costs.dataset['val'] = -val;
15        });
16    });
17}
18TotalCost();