使用jquery动态获取property_id

I have a table that is dynamically generated. And in the table I have a button called view images. Every time this button is clicked, I need to get the image names from database for that particular property.

        <?php foreach($unapproved as $unapp):?>
        <td>
        <div id="#imagedisplay">
            <input id="property" type="text" value="<?php  echo $unapp->property_id; ?>" style="display :none">

        </div>

        <br/><b>Title : <?php  echo $unapp->title; ?></b> <br/><?php  echo nl2br($unapp->full_description); ?></td>
        <td>
            <a  id="view_image" class="btn btn-default" >View Images</a><br/><br/><br/>
            <a  class="btn btn-default" style="color:Green;">Approve</a><br/><br/><br/>
            <a  class="btn btn-default" style="color:red;">Delete</a>
        </td>
        <?php endforeach; ?>

Every time the view images is clicked, need to get the value (property_id) from <input id="property" type="text" value="<?php echo $unapp->property_id; ?>" style="display :none"> using jquery. so that i can do the ajax call.

My problem is, I want to get the property_id of the clicked. I tried this way but it works only for the first property.

  <script>
$('#view_image').click(function(e){
    e.preventDefault();
    var prop_id = $('#property').val();
    console.log(prop_id);
});
</script>

application looks like this

Simple words, I need the property_id of the clicked property.

Can anyone give me suggestions to get the id of the clicked property?

There are many ways to solve this issue, but one easy way is adding an data attribute to your link:

<a class="view_image btn btn-default" data-property-id="<?php echo $unapp->property_id; ?>">View Images</a>

and then changing your script to:

$('.view_image').click(function(e){
    e.preventDefault();
    var prop_id = $(this).data('property-id');
    console.log(prop_id);
});

Just as bonusinfo: It is not allowed to have multiple elements with the same id. Use class' instead.