jquery target specific object with common classname

[dsol828]

Immediate disclaimer: I'm a bit of a novice when it comes to Javascript and jquery...
Here is my jquery function:

<script>
	;(function($) {
		$(function() {
			$('.commentbutton').bind('click', function(e) {
				e.preventDefault();
				$('.popup').bPopup();
			});
		});
	})(jQuery);
</script>

And my HTML/PHP

$result = $mysqli->query($query);
while( $row = $result->fetch_assoc() ){ ?>
	<div class='tile'>
		Id: <?= $row['Id'] ?><br>
		Description: <?= $row['Description'] ?>
		<div class="commentbutton">
			<a href=''> Add Notes</a>
		</div>
		<div id="popup">
			<?= $row['Description'] ?>
		</div>
	</div>
<? }

My question: since the PHP creates a new '.commentbutton' and '.popup' for every record in the query, how do I adjust the script so that a '.commentbutton' opens ONLY the '.popup' in that instance?
Obviously, the script currently opens ALL div's with class '.popup'.