Issue with getting data from HTML into jQuery

Issue with getting data from HTML into jQuery

I'm trying to pass some data from HTML to jQuery, my code partially works,
but since I have more than one tags with same class I don't know how to
send data only from tag which is clicked. I tried to send data through
javascript function but with no luck. Can someone take a look at my code
and try to help me.
<div id="inboxWindow">
<table id="list_ofMessages">
<tr>
<td>id</td>
<td>From</td>
<td>Title</td>
<td>Date</td>
</tr>
<?php while($data = $query2->fetch_assoc()): ?>
<?php
$senderID = $data['senderID'];
$query3 = $con->query("select * from login where user_id =
'$senderID'");
$name = $query3->fetch_assoc();
$name = $name['username'];
?>
<tr>
<?php if($data['opened'] == 1) : ?>
<td class="messageID"><?php echo $data['idmessage']; ?></td>
<td><?php echo $name; ?></td>
<td><a class="readMessageLink"><?php echo $data['title'];
?></a></td>
<td><?php echo $data['received']; ?></td>
<?php else : ?>
<td class="messageID"><b><?php echo $data['idmessage'];
?></b></td>
<td><b><?php echo $data['senderID']; ?></b></td>
<td><b><a class="readMessageLink"><?php echo
$data['title']; ?></a></b></td>
<td><b><?php echo $data['received']; ?></b></td>
<?php endif; ?>
</tr>
<?php endwhile; ?>
</table>
</div>
<div id="messageWindow">
<label id="titleArea"></label><br><br>
<label>Message:</label><br>
<label id="contentArea"></label>
</div>
script.js
$(".readMessageLink").click(function(){
$.post("readMessage.php", {"id" : $(".messageID").html()},
function(data){
var obj = jQuery.parseJSON(data);
$("#titleArea").html("Title: " + obj.title);
$("#contentArea").html(obj.content);
});
$("#inboxWindow").slideToggle(300);
$("#messageWindow").slideToggle(300);
});
Using this code I always get messageID from first message, no matter on
which one I click.