Give different ID to each element in for loop

Question

I have a far loop which check the number and output the result to number of that.

For exmaple, in below picture the "cut image" is displayed in multiples times. I have tag in the far loop so it outputs the image according to number of times. And that number come from database.

MY Question. Obviously all the images in first row will have same ID. Currently user can only click the first image of the row. I would like to give each element different ID if possible. Than I would like to use JQuery to add click event. So if I click on 4th image in first row, it alert message and if i click 5th image it shows different alert message.

How I can assign different ID to each element in far loop so it does only make first Image clickable but instead all elements clickable.

My loop

 <table class="table table-bordered">
    <thead>
    <tbody>
      <tr>
        <?php
        for($x=0; $x < $row['noof10s_vnr']; $x++){ 
            ?>

            <td><img alt="" class="yellow-process center-block " id ="cut-full-roll-<?php echo $row['id_vnr']; ?>" name="<?php echo $row['id_vnr']; ?>" src="../../css/icons/vinyl-rolls/cut.png"></td>
        <?php
        }
        ?>

      </tr>
    </tbody>
  </table>

My jquery selector If I can give each element different ID, than I can do something like this to add clicked event to clicked image.

jQuery( "#vinyl-roll-down-<?php echo $row['id_vnr']; ?>" ).click(function() {

But I need help assign different unique to each element in far loop.

Thanks in advance.

Answer 1

I think your loop in PHP is okay like that. The problem lies in your jquery, try getting the right id by using use attribute selector attr("id") .

jQuery( ".yellow-process" ).click(function() {
    var selected = jQuery(this).attr("id");
    alert(selected); // to show the selected image id
    // use the variable selected to do something with it.
}

After trying this jquery code you could advance it for your use.

Answer 2

You can try this

In html:

<table class="table table-bordered">
    <thead>
    <tbody>
    <tr>
        <?php
        for($x=0; $x < $row['noof10s_vnr']; $x++){
        ?>
        <td><img id="image{{$x}}" alt="" class="yellow-process center-block " onclick="imageClick(<?php echo $row['id_vnr']; ?>)" name="<?php echo $row['id_vnr']; ?>" src="../../css/icons/vinyl-rolls/cut.png"></td>
        <?php
        }
        ?>

    </tr>
    </tbody>
</table>

in jquery

function imageClick(id) {
    alert(id);
  var imageId = jQuery(this).attr("id");
   alert(imageId);
//    your code
}

I thigh it will help you.

Answer 3

$( ".yellow-process" ).bind("click",function() {
    var selected = $(this).attr("id");
    alert(selected); // to show the selected image id
    // use the variable selected to do something with it.
});

Your php code written in the right way and working as expected just for jquery above is the working code