jquery only returning last result of php while loop

The following code is only grabbing the value of the last result in the PHP while loop. Any / all help much-appreciated. Thanks!

PHP/HTML/JS:

        <section id="info">
            <?php
                $user = $session->username;
                $q = sprintf("SELECT * FROM mail WHERE UserTo = '%s' ORDER BY SentDate DESC",
                      mysql_real_escape_string($user));
                $getMail = mysql_query($q, $link) or die(mysql_error());

                if(mysql_num_rows($getMail) == 0) {
                    echo "<p>you have no mail</p>";
                }
                else {
                ?>
            <form id="inbox" class="mail">
                <fieldset>
                    <ul>
                        <li style="border: 2px solid purple; width: 100%;">
                            <span style="width: 8%; margin-left: 13%;">Status</span>
                            <span style="width: 15%;">From</span>
                            <span style="width: 45%;">Subject</span>
                            <span style="width: 16%;">Time</span>
                        </li>
                <?php
                        while($mail = mysql_fetch_object($getMail)) {
                            $status         =       $mail->status;
                            $mailId     =       $mail->mail_id;
                            $from           =       $mail->UserFrom;
                            $subject        =       $mail->Subject;
                            $received       =       $mail->SentDate;
                        开发者_如何学运维    $theMessage =       $mail->Message;
                        ?>
                        <li class="outerDiv" style="border: 2px dotted purple;">
                            <button style="display: inline;" class="viewButton">View</button>
                            <button style="display: inline;">Delete</button>
                            <?php
                            echo "<span>" . $mail_id . "</span>";
                            echo "<span style="display: inline-block; width: 8%; border: 1px solid red;'>" . $status . "</span>";
                            echo "<span style='display: inline-block; width: 15%; border: 1px solid red;'>" . $from . "</span>";
                            echo "<span style='display: inline-block; width: 45%; border: 1px solid red;'>" . $subject . "</span>";
                            echo "<span style='display: inline-block; font-size: x-small; width: 17%; border: 1px solid red;'>" . $received . "</span>";                    
                            ?>
                        </li>
                <?php   }

                    } ?>
                    </ul>
                </fieldset>
            </form>
        </section>
        <section id="details">
            <div class="theMessage" style="display: none;"><?php echo $theMessage; ?></div>
            <script type="text/javascript">
                $(document).ready(function() {
                    $(".outerDiv").click(function(e) {
                        if($(e.target).is(".viewButton")) {
                        $(".theMessage").fadeIn(1000);
                        }
                    });
                    return false;
                });
            </script>
        </section>

When you say "grabbing the value of the last result," I'm guessing you're talking about the following line?

<div class="theMessage" style="display: none;"><?php echo $theMessage; ?></div>

That's outside the while() loop, so yeah, $theMessage will just retain the last value from the loop.

Seeing as how you're starting the <form> within the else block but closing the </form> outside the else block, I'm guessing you're ending your while and if-else too early.

First of all you have a syntax error in your code. Escape double quotes or use single quotes for HTML.

What javascript library are you using? Looks like it could be JQuery?

If you expect your selector to return an array, then you need to use an iterator to act on each element. Try the each iterator function: http://api.jquery.com/each/

$('.outerDiv').each(function() {
    this.click( function(e) {....