Bootstrap 3 Model displaying the same row from MYSQL database - php

Question

I am new to PHP and MYSQL, I am trying to display news data from a MYSQL db into a models. Each model should display a different [longDesc] I have the headlines and date showing correctly on the html page but when you click the button and the model pops up its only displaying the first row [longDesc] from the database across all 4 models.Instead of seperate rows, so effectively only one news story in each of the models. Can anyone point my in the right direction please.
Here is the code I am using:
<?php
$query2 = mysql_query("SELECT headline, byline, source, longDesc, newsAbbr, addedOn FROM tbl_news ORDER BY addedOn DESC LIMIT 3");
while ($temp2 = mysql_fetch_array($query2)) {
echo "<div class='row'>";
echo "<h3>".$temp2['headline']."</h3>";
echo "<p>".date("F d, Y",strtotime($temp2['addedOn']))."</p>";
echo "<a href='#' class='btn btn-sm btn-danger' data-toggle='modal' data- target='#largeModal'>Read More";
echo "</a>";
echo "</div>";
echo "<div class='modal fade' id='largeModal' tabindex='-1' role='dialog' aria-labelledby='largeModal' aria-hidden='true'>";
echo "<div class='modal-dialog modal-lg'>";
echo "<div class='modal-content'>";
echo "<div class='modal-header'>";
echo "<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×";
echo "</button>";
echo "<h5 class='modal-title' id='myModalLabel'>News</h5>";
echo "</div>";
echo "<div class='modal-body'>";
//this is the value called from the db that displays across all models (need the diff rows to be called????
echo "<p>".stripslashes($temp2['longDesc'])."</div>";
echo "</div>";
echo "<div class='modal-footer'>";
echo "<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>";
echo "</div>";
echo "</div>";
echo "</div>";
}?>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>