How to use jquery to perform actions on PHP loop results?
<p>I've searched and can't seem to make sense of the answers I've found. Grateful for any help!!</p>

<p><strong>Goal:</strong> Reveal selected message detail in section#details below the listed message headers in section#info.</p>

<p><strong>Problem:</strong></p>

<ol>
<li>The following code alerts a result but won't fadeIn();, (or show();, or ...anything).</li>
<li>The following code is only grabbing the value of the last result in the PHP while loop.</li>
</ol>

<p><strong>php/html/jquery/javascript:</strong></p>

<pre><code>        &lt;section id="info"&gt;
            &lt;?php
                $user = $session-&gt;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 "&lt;p&gt;you have no mail&lt;/p&gt;";
                }
                else {
                ?&gt;
            &lt;form id="inbox" class="mail"&gt;
                &lt;fieldset&gt;
                    &lt;ul&gt;
                        &lt;li style="border: 2px solid purple; width: 100%;"&gt;
                            &lt;span style="display: inline-block; border: 1px solid black; width: 8%; margin-left: 13%;"&gt;Status&lt;/span&gt;
                            &lt;span style="display: inline-block; border: 1px solid black; width: 15%;"&gt;From&lt;/span&gt;
                            &lt;span style="display: inline-block; border: 1px solid black; width: 45%;"&gt;Subject&lt;/span&gt;
                            &lt;span style="display: inline-block; border: 1px solid black; width: 16%;"&gt;Time&lt;/span&gt;
                        &lt;/li&gt;
                &lt;?php
                        while($mail = mysql_fetch_object($getMail)) {
                            $status         =       $mail-&gt;status;
                            $mailId     =       $mail-&gt;mail_id;
                            $from           =       $mail-&gt;UserFrom;
                            $subject        =       $mail-&gt;Subject;
                            $received       =       $mail-&gt;SentDate;
                            $theMessage     =       $mail-&gt;Message;
                        ?&gt;
                        &lt;li class="outerDiv" style="border: 2px dotted purple;"&gt;
                            &lt;button style="display: inline;" class="viewButton"&gt;View&lt;/button&gt;
                            &lt;button style="display: inline;"&gt;Delete&lt;/button&gt;
                            &lt;?php
                            echo "&lt;span style='border: 1px solid red;'&gt;" . $mail_id . "&lt;/span&gt;";
                            echo "&lt;span style='display: inline-block; width: 8%; border: 1px solid red;'&gt;" . $status . "&lt;/span&gt;";
                            echo "&lt;span style='display: inline-block; width: 15%; border: 1px solid red;'&gt;" . $from . "&lt;/span&gt;";
                            echo "&lt;span style='display: inline-block; width: 45%; border: 1px solid red;'&gt;" . $subject . "&lt;/span&gt;";
                            echo "&lt;span style='display: inline-block; font-size: x-small; width: 17%; border: 1px solid red;'&gt;" . $received . "&lt;/span&gt;";                    
                            ?&gt;
                        &lt;/li&gt;
                &lt;?php   }

                    } ?&gt;
                    &lt;/ul&gt;
                &lt;/fieldset&gt;
            &lt;/form&gt;
        &lt;/section&gt;
        &lt;section id="details"&gt;
            &lt;div class="theMessage" style="display: none;"&gt;&lt;?php echo $theMessage; ?&gt;&lt;/div&gt;
            &lt;script type="text/javascript"&gt;
                $(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?
                });
            &lt;/script&gt;
        &lt;/section&gt;
</code></pre>

<p>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.</p>
