title: Bootstrap popup modal with Get php function
body: <p>please help me.. i am having a trouble with the popup modal.. how to get a certain data/value and display it to the modal.. I dynamically fetch a data from database and display it to html form, when i clicked one of the displayed item the modal popup should show containing the said description. My problem is that when I clicked one of the items it popup the modal but it contains all the data that is not related to the item that i Clicked.</p>
  
  <p>Example i fetched form database this 2 items below (see pictures below),<a href="https://i.stack.imgur.com/NnLXP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NnLXP.png" alt="enter image description here"></a>
   when i clicked one of them the popup modal should show containing the said value like below <a href="https://i.stack.imgur.com/x4SkI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/x4SkI.png" alt="enter image description here"></a>
  but i am having a trouble when i clicked one of them it show all the description with the other item like below
  <a href="https://i.stack.imgur.com/nKzcR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nKzcR.png" alt="enter image description here"></a>
  my code is here</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script type="text/javascript"&gt;
  $(function () {
  $("#btnShow").click(function(){
  
     $.ajax({
        url: 'prologue.php?story=$row[title]',
        method: 'get',
        success: function(data) {
          $(".modal-body").html(data);
        },
        error:function(xhr,code,text){
          alert("error occoured : "+text);
        }
      });
  $('#demoModal').modal('show');
  });
  });
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;title&gt;Compiled Story&lt;/title&gt;
  
  &lt;script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
  &lt;script src="../js/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="../js/js/bootstrap.min.css" rel="stylesheet" &gt;
  
  &lt;link rel="stylesheet" href="app.css"&gt;
    &lt;link rel="stylesheet" href="../css/font-awesome.min.css"&gt;
    &lt;link rel="shortcut icon" href="../logo.png"&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;table class="story-albums-lib" style="margin-left: 250px;"&gt;
  
  &lt;?php
  $con=mysqli_connect("localhost","root","","scenezone");
  // Check connection
  if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }
  
  $sql = "SELECT * FROM create_story
  WHERE title IN (SELECT story FROM story_chapter WHERE status = '1');";
  
  $result=mysqli_query($con,$sql);
  
  // Fetch all
  $i = 0;
  while($row = mysqli_fetch_array($result)){
  if ($i % 5 == 0) {
  echo "&lt;tr&gt;";
  }
  echo "&lt;td&gt;&lt;a href='prologue.php?story=$row[title]'&gt;&lt;img src='../stories/" .$row['image']."' alt='Image' id='btnShow' style='width: 200px; height: 250px;  border-radius: 8px;'&gt;&lt;/a&gt;
  
  &lt;br&gt;&lt;p id='btnShow' style='margin-left:50px;'&gt;".$row["title"]."&lt;/p&gt;
  
  &lt;/td&gt;";
  if ($i % 5 == 4) {
  echo "&lt;/tr&gt;";
  }
  $i++;
  }
  // Free result set
  mysqli_free_result($result);
  
  mysqli_close($con);
  ?&gt;
  &lt;/div&gt;
  &lt;!-- Modal --&gt;
  
  &lt;div class="modal fade" id="demoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
  &lt;div class="modal-dialog"&gt;
  &lt;div class="modal-content"&gt;
  &lt;div class="modal-header"&gt;
  &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
  &lt;h4 class="modal-title" id="myModalLabel"&gt;&lt;?php echo $row ['email'];?&gt;&lt;/h4&gt;
  &lt;/div&gt;
  &lt;div class="modal-body"&gt;
  
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt;
  &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
  &lt;button type="button" id="btnchapterlist" class="btn btn-primary"&gt;Start Reading&lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>here is my prologue.php</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php
  $servername = "localhost";
  $username = "root";
  $password = "";
  $dbname = "scenezone";
  
  // Create connection
  $conn = new mysqli($servername, $username, $password, $dbname);
  // Check connection
  if ($conn-&gt;connect_error) {
      die("Connection failed: " . $conn-&gt;connect_error);
  } 
  
  $sql = "SELECT * FROM create_story
  WHERE title IN (SELECT story FROM story_chapter WHERE status = '1');";
  
  $result = $conn-&gt;query($sql);
  
  if ($result-&gt;num_rows &gt; 0) {
      // output data of each row
      while($row = $result-&gt;fetch_assoc()) {
          echo "&lt;center&gt;";
          echo "&lt;tr&gt;";
          echo "&lt;td&gt;&lt;img src='../stories/".$row['image']."' alt='Image' class='img-responsive;' style='width: 200px; height: 250px;'&gt;
          &lt;br&gt;&lt;p&gt; Title: ".$row["title"]."
          &lt;br&gt;Genre : ".$row["genre"]."
          &lt;br&gt;Author : ".$row["pen_name"]."
           &lt;br&gt;Prologue : ".$row["description"]."&lt;/p&gt;
        
          &lt;/td&gt;";
  
          echo "&lt;/tr&gt;";
          echo "&lt;/center&gt;";
      }
  } else {
      echo "0 results";
  }
  $conn-&gt;close();
  ?&gt;</code></pre>
  </div>
  </div>
  </p>