Traversing HTML DOM Elements in foreach loop

I have this segment of code here

<table>
    <thead>
        <th>Title One</th>
        <th>Title Two</th>
        <th>Title Three</th>
    </thead>
    <tbody>
        <?php foreach ($foos as $foo): ?>
            <tr>
                <td id="x"><?php echo $foo->bar1; ?></td>
                <td id="y"><?php echo $foo->bar2; ?></td>
                <td id="z"><?php echo $foo->bar3; ?></td>
            </tr>
        <?php endforeach; ?>
    </tbody>
</table>

<script type="text/javascript">
    $('#x').on('click', function(){
        console.log($(this).html());
    });
</script>

Suppose I have 10 rows of data there, how will I be able to reference the exact element I have clicked? For example row number 5, how will jQuery know that I have clicked row 5? I can't go writing <td id="x1">,<td id="x2">,<td id="x3">,<td id="x4"> because I can be having a thousand records.

Any help will be appreciated.