Тип ввода скрытый передает то же значение из foreach в JavaScript

Question

У меня есть код с foreach, который печатает изображение, а затем он сохраняет идентификатор изображения в скрытом поле формы. Я хочу получить конкретный идентификатор изображения, когда пользователь щелкает конкретное изображение. Но он возвращает первое значение идентификатора foreach image. Извините за плохой английский . Кто-нибудь, пожалуйста, помогите мне с этим.

<div id="gallery_09" >
    <?php foreach ($hair['hair_color_media'] as $key => $row){?>
   <input type = "hidden" name = "hair_color_slug" value = "<?=$row->hair_color_slug?>">
   <a href="#" class="elevatezoom-gallery" data-toggle="tooltip" title="<?=$row->hair_color?>" data-update="" data-image="<?=base_url('assets/img/products/large/'.$row->media_images);?>" data-zoom-image="<?=base_url('assets/img/products/large/'.$row->media_images);?>" onclick = "getPrice();">
      <img data-toggle="tooltip" title="<?=$row->hair_color?>" src="<?=base_url('assets/img/products/pin/'.$row->media_images);?>" width="50" style = "border-radius: 50%;">
  </a>
<?php }?>
  </div>
<input type = "text" readonly="" id ="color" name = "color"/>

<script type="text/javascript">
        function getPrice()
        {
            var color = $('input:hidden[name=hair_color_slug]').val();

            document.getElementById('color').value = color;
        }
    </script>

Answer 1

передать обработчику ключевое слово this в функции getPrice, чтобы получить текущий элемент, вызвавший событие.

onclick = "getPrice(this);

При нажатии получится предыдущее скрытое значение элемента clicks и будет помещено в поле цвета.

function getPrice(getprice)
{
    var color = $(getprice).prev().val();

    document.getElementById('color').value = color;
}