JavaScriptでHTMLのclass要素を順番に増やしたい

Question

以下の<span class="cost1">のcost1,cost2,cost3とJavaScriptで順番に増やす方法はありますか？

<div class="container">
          <button type="button" class="buttons">家賃<br>
            <span class="cost1">80,000</span>円
          </button>
          <button type="button" class="buttons">光熱費<br>
            <span class="cost2">5,000</span>円
          </button>
          <button type="button" class="buttons">水道代<br>
            <span class="cost3">5,000</span>円
          </button>
// 以下省略

このようにしてみましたが、やはりダメでした。。。

for (let i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener('click', () => {
            buttons[i].classList.toggle('clicked');
            costs[i].classList.toggle(`'cost$[i]'`);
}

Answer 1

できることはできますが、ユニークな連番クラスなんて取り回しが面倒になるだけなので
やらないほうがいいです。同じクラスをつけてその出現順でなにかすればよい気がします

Comments

[yambejp]

<style>
.clicked{color:red;}
.cost1{font-size:1.2em;}
.cost2{font-size:1.4em;}
.cost3{font-size:1.6em;}
</style>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelectorAll('.buttons').forEach((x,y)=>{
x.addEventListener('click',()=>{
x.classList.toggle('clicked');
x.querySelector('span').classList.toggle('cost'+(y+1));
});
});
});
</script>
<div class="container">
<button type="button" class="buttons">家賃<br>
<span class="cost1">80,000</span>円
</button>
<button type="button" class="buttons">光熱費<br>
<span class="cost2">5,000</span>円
</button>
<button type="button" class="buttons">水道代<br>
<span class="cost3">5,000</span>円
</button>
</div>

[gyoruo]

ありがとうございます。
そのやり方で試してみたいと思います！