jquery - Passing MySQL data to Modal Form via PHP

Question

I am attempting to use modal as a simple means for users to edit data in a MySQL db. It appears that only the first line retrieved in my SELECT statement is available to modal and I do not understand why. In other words, imagine a table with several columns, the first being a customer's name. My goal is to be able to click a name, show a modal with a form, and then pass the results of that form to update the db using PHP. No matter which name I click, though, only values related to the first resulting line are passed.

Table 'Item' includes information for all of the lines that will be present in the table.

$personID is passed via GET and is the means of selecting customers of a specific employee.

The modal div is included within the PHP while clause.

The form contained in the modal passes the information to a basic PHP update script.

Thanks very much, Mike

PHP Select Stmt:

    <?php
        $query = "SELECT * FROM item WHERE personID = $personID";
        $result = mysql_query($query);
        while($info=mysql_fetch_array($result)){
        $itemID = $info['itemID'];
    ?>  

Link (one of many; I've abbreviated this section):

    <div class='row-fluid'>
        <div class='span3'>
            <a href="#customerModal" data-toggle="modal"><?php echo($info['itemCustomer']); ?></a>
        </div>
    </div>  

Modal:

<div id="customerModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel"><?php echo($info['itemID']); ?></h3>
</div>
<div class="modal-body">
    <form action='pipelineEdit.php' method='post'>
        <input placeholder='Customer Name' style='width:50%' type='text' name='editValue' id='editValue'>
        <input type='hidden' value='itemCustomer' name='editField' id='editField'>
        <input type='hidden' value='<?php echo($info['itemID']); ?>' name='itemID' id='itemID'>
        <input type='hidden' value='<?php echo($personID); ?>' name='personID' id='personID'>
</div>
          <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary">Save changes</button>
          </div>
          </form>
        </div>

End of PHP while comes after modal:

    <?php } ?>

Answer 1

You are printing multiple divs with the same ID = customerModal

IDs have to be unique, so the link will only open the first modal printed in the loop.

Change:

<div id="customerModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

to:

<div id="customerModal<?php echo $info['itemID']; ?>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

and:

<a href="#customerModal" data-toggle="modal">

to:

<a href="#customerModal<?php echo $info['itemID']; ?>" data-toggle="modal">