How should I go about populating my accordian with data from mysql

Question

I have a vertical accordion that I plan on using as a directory. I can hard-code all items in the directory and everything works fine, however, I want to populate everything with content from my mysql database. The methods I've tried for doing that have all been failures, because the structure of my accordion is:

 <aside id="directory">
    <div id="wrapper">
       <ul class="menu">
          <!--The main items are denoted by the li class="itemNumber"-->
          <li class="item1">General Partners <span>9th Floor</span>
             <ul>
                <!--items that will show when an element in the accordion is selected-->
                <li class="subitem1">
                   <table>
                      <tr>
                         <td>fName lName</td>
                         <td>email</td>
                         <td><span>ext. num</span></td>
                      </tr>
                   </table>
                </li>
                <li class="subitem2">
                   ...
                </li>
             </ul> 
          </li>
          ...
       </ul>
    </div>          
 </aside>

Like I said, when I hardcode entries in like that it works fine. My jQuery works as expected--everything's good. But when I insert the following PHP code after:

 <li class="subitem">

nothing works...which is kind of what I expected to happen but I'm not sure what else I can do. Anyway here's the PHP code:

 <?php
    //connect to the db server
    $connect = mysql_connect("###", "###", "###") //edited this line here
        or die("unable to connect to database");

    $mysql_select_db("###", $connect);
       or die("unable to connect to ### database");

    $query = mysql_query("SELECT * FROM staff_directory WHERE Department = 'General Partners'", $connect)
       or die("unable to run query");

    while ($row = mysql_fetch_assoc($query))
    {
       $data1 = $row["LastName"];
       $data2 = $row["FirstName"];
       $data3 = $row["Email"];
       $data4 = $row["Ext"];

       echo "<tr>
               <td>".$data2 $data1."</td>
               <td>".$data3."</td>
               <td><span>".$data4."</span></td>
             </tr>";
    }
    mysql_close($connect);
 ?>

I insert this PHP code right after:

 <li class="subitem">
    <table>
       //Php code here

Knowing that this is obviously the wrong approach, how would you handle this? Any help anyone could provide would be greatly appreciated.

Answer 1

In the top of the script, put all your database and query info etc. Then put the following code in .item1 ul

 <?php $i=0; while ($row = mysql_fetch_assoc($query)) { $i++; ?>
    <li class="subitem<?php echo $i; ?>">
        <table>
            <tr>
                <td><?php echo $row["FirstName"] . $row["LastName"]; ?></td>
                <td><?php echo $row["Email"]; ?></td>
                <td><span><?php echo $row["Ext"]; ?></span></td>
            </tr>
        </table>
    </li>
 <?php } ?>