html - データを宣言して収集する最良の方法

Question

data 属性を使用してリンク付きのデータを渡していますが、この種の宣言が冗長になることがよくあります。たとえば、反復処理して画面に表示する画像の配列があります。それぞれに画像 ID と、リンクとして表示される一連のオプションがあります。現在、各リンクのデータ属性に image_id を渡しています。ただし、image_id を 1 回だけ宣言し、画像に関連付けられたリンクの 1 つをクリックしたときにこのデータを収集する方法が必要です。

    for($i = 0; $i <= ($image_array_length - 1); $i++){ ?>

<img src="somesrc" />

<a href="#" data-image_id="<?php echo $image['image_id']; ?>">Image option 1</a>
<a href="#" data-image_id="<?php echo $image['image_id']; ?>">Image option 2</a>
<a href="#" data-image_id="<?php echo $image['image_id']; ?>">Image option 3</a>

<?php }?>

したがって、各リンクのイメージ ID を宣言する代わりに、次のようなものが必要です。

    for($i = 0; $i <= ($image_array_length - 1); $i++){ ?>

<img src="somesrc" id="data-placeholder" data-image_id="<?php echo $image['image_id']; ?>" />

<a href="#" class="js-selector">Image option 1</a>
<a href="#" class="js-selector">Image option 2</a>
<a href="#" class="js-selector">Image option 3</a>

<?php }?>

しかし、私が直面している問題は、いくつかの画像があり、それぞれが img 要素に同じ ID を持つことです。つまり、特定の image_id を識別できないということです。だからJavaScriptで：

$(".js-selector").click(function(){
    var image_id = $("#placeholder").data("image_id");
    some statements...
});

2 番目の HTML の例のように image_id を宣言したい場合、javascript は収集する image_id をどのように知る必要がありますか?