PHP中的PHP

I have a lot of dvd's so I thought I would try to create a mysql database and output it on a php site.

This is my first time with both of these and would be happy for some constructive criticism. I understand the code is a little messy some of it is so i can read it better whilst I learn

I am running these using Xampp.

My first output works fine, it displays the results in a table DVD id, Cover, Name, Genra, Trailer. Here is the files for this one. (don't have enough reputation to post link 1)

Now what I am trying to do is to have the images with the title under it, side by side. This itself works as I want. (don't have enough reputation to post link 2)

What I am after is a popup when I click the cover that displays information of the dvd e.g synopsis, genres and dvd id.

This site helped http://vast-engineering.github.io/jquery-popup-overlay/ I can not get it to work within the site, not sure how to sort it.

http://jsfiddle.net/Phoenix830/ttrLbdev/ This doesnt work, I think it is because of the div name I changed it in the div to be unique but can not get the script to work.

    <!doctype html>

<html>
       <head>
           <meta http-equiv = ".content-type." content=".text/html; charset=utf-8." />
           <title>Video Database Output</title>
           <meta name="Description" content="Video Database" />
           <link href="style2.css" rel="stylesheet" type="text/css" />
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
            <script src="jquery.popupoverlay.js"></script>


       </head>
               <body>
<div id = "wrapper">
<Div id = "headder"> <h1> Video Database</h1></div>
<div id = "content">


<?php

$hostname = "localhost"; 
$username="acess";
$password="123456";
$database="video_database";



//connection to the database

mysql_connect($hostname, $username, $password) 
  or die("Unable to connect to MySQL");



@mysql_select_db($database) or die( "Unable to select database");

$query="SELECT * FROM video";
$result=mysql_query($query);

$num=mysql_numrows($result);

mysql_close();


//display results






$i=0;
while ($i < $num) {

$dvd_id=mysql_result($result,$i,"dvd_id");
$film_tv=mysql_result($result,$i,"film_tv");
$format=mysql_result($result,$i,"format");
$genre=mysql_result($result,$i,"genre");
$genre_2=mysql_result($result,$i,"genre_2");
$genre_3=mysql_result($result,$i,"genre_3");
$name=mysql_result($result,$i,"name");
$trailer=mysql_result($result,$i,"trailer");
$id=mysql_result($result,$i,"id");
$description=mysql_result($result,$i,"description");
$cover=mysql_result($result,$i,"cover");

echo"
<div class = \"entry\">  
  ";



 echo "
 <div id=\"my_popup".$id."\">

    <table>
    <tr>
    <td> $genre</td> <td>$genre_2</td> <td>$genre_3</td>
    </tr>
    </table>

    <!-- Add an optional button to close the popup 
    <button class=\"my_popup_close\">Close</button>-->

  </div>
";







 echo "
  <table>

  ";


if ($cover!="")
{
echo "
    <tr>
        <td>
            <img class = \"cover\" src = ". $cover ." alt = \" cover\" >
        </td>
    </tr>
    <tr>
        <td>
            $name
        </td>
    </tr>   
";
}
else  
{
echo "
    <tr>
        <td>
            <img class = \"cover\" src = \" covers\blank.jpg \" alt = \" cover\" >
        </td>
    </tr>
    <tr>
        <td>
            $name
        </td>
    </tr>   
";
}

echo " <button class=\"my_popup".$id."\">Open popup</button> </table></div>";

  <script>
    $(document).ready(function() {

      // Initialize the plugin
    <?php echo " $(\'#my_popup$id\').popup();  ";?>

    });
  </script>


$i++;



}


?>




</div>

</div>
<div id = "footer"><p> t </p></div>
</body>
</html>

I have tried to find the answer using search engines but can not get a answer that fits. Thank you for any help

Put the JS statement outside the PHP:

<script>
    $(document).ready(function() {
        // Initialize the plugin
        $('#my_popup<?php echo $id; ?>').popup();
    });
</script>