How to use jquery to perform actions on PHP loop results?

tchnchn

I’ve searched and can’t seem to make sense of the answers I’ve found. Grateful for any help!!

Goal: Reveal selected message detail in section#details below the listed message headers in section#info.

Problem:

1. The following code alerts a result but won’t fadeIn();, (or show();, or …anything).
2. The following code is only grabbing the value of the last result in the PHP while loop.

php/html/jquery/javascript:

        <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="display: inline-block; border: 1px solid black; width: 8%; margin-left: 13%;">Status</span>
                            <span style="display: inline-block; border: 1px solid black; width: 15%;">From</span>
                            <span style="display: inline-block; border: 1px solid black; width: 45%;">Subject</span>
                            <span style="display: inline-block; border: 1px solid black; 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 style='border: 1px solid red;'>" . $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")) {
                    alert($(document).find(".theMessage").text()); //this works
                   $(document).find(".theMessage").text().fadeIn(1000); //this doesn't work

                   var theMessage = $(document).find(".theMessage").text();
                   theMessage.fadeIn(1000); //this doesn't work
                        }
                    });
                    return false; (sometimes prevents default..sometimes not?
                });
            </script>
        </section>

p.s. the crazy colors and borders are/were for temp layout purposes. also, the delete button will obviously have functionality… once I can figure this out.