php jquery popup message box working in the while loop

Question

php jquery popup message box working in the while loop but in the popup address field showing same address for all entries can any one tell me where i'm doing wrong thanks in advance

Html Jquery Script

<script type="text/javascript">
    $(document).ready(function() {
        $('#button').click(function(e) { 
            $('#modal').reveal({ 
                animation: 'fade',                   
                animationspeed: 600,                       
                closeonbackgroundclick: true,              
                dismissmodalclass: 'close'   
            });
        return false;
        });
    });
</script>

Html Table & Php Page

<table>
$query1=mysql_query("select * from customers order by id desc");
while($row1=mysql_fetch_array($result))
{
?>
<tr>
<td><div align="center"><?php echo $row1['firstname']; ?></div></td>
<td><div align="center"><?php echo $row1['lastname']; ?></div></td>
<td><div align="center"><?php echo $row1['dob']; ?></div></td>
<td><div align="center"><?php echo $row1['email']; ?></div></td>
<td><div align="center"><a href="#" class="button">Address</a></div></td>
<td><div align="center"><?php echo $row1['phone']; ?></div></td>
<td><div align="center"><?php echo $row1['country']; ?></div></td>
<td><div align="center"><?php echo $row1['city']; ?></div></td>
</tr>


<Popup Start> 

<div id="modal">
<div id="heading">
Sign Up! Customer's Address
</div>
<div id="content">
<p><?php echo $row1['address']; ?></p>
</div>
</div>

<Popup End>

<?php }?>
</table>

Answer 1

In HTML

Change this line to :

<td><div align="center"><a href="#" id="button">Address</a></div></td>

this:

<td><div align="center"><a href="#" class="button">Address</a></div></td>

&

Change this line to:

<div id="modal">

this:

<div class="modal">

Javascript:

$('.button').click(function(e) { 

            $(this).closest('tr').find('.modal:first').reveal({ 
                animation: 'fade',                   
                animationspeed: 600,                       
                closeonbackgroundclick: true,              
                dismissmodalclass: 'close'   
            });
        return false;
        });

Answer 2

Try to give unique id for all the buttons like this

<td><div align="center"><a href="#" id="button_<?php echo $row1['id'];?>">
    Address</a>
</div></td>

and then apply popup button click on according with its id value of that button and also edit your jquery as like

<script type="text/javascript">
$(document).ready(function() {
    $("input[id^='button']").click(function(e) { 
        $('#modal').reveal({ 
            animation: 'fade',                   
            animationspeed: 600,                       
            closeonbackgroundclick: true,              
            dismissmodalclass: 'close'   
        });
    return false;
    });
});
</script>