以下のように複数のボタンがHTML上にあるとします。

<button name="item1" onclick="foo()">商品1</button>
<button name="item2" onclick="foo()">商品2</button>
<button name="item3" onclick="foo()">商品3</button>

ボタンが押されると、foo()が実行されます。
このとき、何番目のボタンが押されたかを取得したい場合に、data-xxxを使うと便利です。

<button data-index="1" name="item1" onclick="foo()">商品1</button>
<button data-index="2" name="item2" onclick="foo()">商品2</button>
<button data-index="3" name="item3" onclick="foo()">商品3</button>

上記で商品１をクリックした場合

foo(e) {
   // datasetは、data-xxxで指定されたオブジェクトになる
   // {index:1}
   const data = e.currentTarget.dataset['index']; // 1が返される
}

data-xxxを増やすと

<button data-id="foo" data-index="1" name="item1" onclick="foo()">商品1</button>
<button data-id="bar" data-index="2" name="item2" onclick="foo()">商品2</button>
<button data-id="baz" data-index="3" name="item3" onclick="foo()">商品3</button>

foo(e) {
   // datasetは、data-xxxで指定されたすべてが入る
   // {id:"foo", index:1}
   const data = e.currentTarget.dataset['id']; // fooが返される
}

参考

MDN