获取具有自己的迭代按钮的输入值

Question

I've successfully added an iterator to my php foreach loop so that I can create a unique button for each row in my table.

<?php $i = 1;?>
@foreach($getPromoCodes as $codes)

    <input type="hidden" name="promo_code_id" id="promo_code_id[{{$i}}]" class="promo_code_id" value="{{ $codes->promo_codet_id }}">

<?php $i++;?>
@endforeach

However, I can't figure out, once the button is pressed, how to get the value of the input from the clicked button. This being due to the uniqueness of each button with the iterator.

var promo_codet_id = document.getElementsByClassName("promo_code_id");

This returns undefined when I console log it.

How do I need to change my JS for this?

Answer 1

You can do this way:

<div class="elements">
    <?php $i = 1;?>
    <?php foreach($getPromoCodes as $codes): ?>

            <input type="hidden" name="promo_code_id" id="promo_code_id[{{$i}}]" class="promo_code_id" value="{{ $codes->promo_codet_id }}">
            <a href="#" class="btn" data-id="<?= $i ?>">Link </a>

        <?php $i++;?>
    <?php endforeach; ?>
</div>

jquery:

$('.elements').on('click', '.btn', function(e){
   e.preventDefault();
   console.log($(this).data('id'));
});