Question

<table class="table table-striped">  
            <thead>  
            <tr>  
                <th>Select</th>  
                <th>From</th>  
                <th>Subject</th>  
                <th>Date</th>  
            </tr>
            </thead>
            <tbody>  
        <?php
            //show records
            while ($row = mysql_fetch_array($usrmsg)) {

            $frm_user = $row['from_uid'];
            // Get details from users_profiles table.
            $usrname = mysql_query("select * from `users_profiles` where `id`=$frm_user");
            $usrname = mysql_fetch_array($usrname);
        ?>
            <tr>  
                <td> <label class="checkbox"><input type="checkbox"></label> </td>  
                <td><?php echo $usrname['firstname'] . " " . $usrname['lastname'];?> </td>  
                <td><!-- <a href="<?php echo $row['id']; ?>" id="getmsg"><?php echo substr($row['subject'],0,40); ?>...</a> -->
                 <input class="data" type="text" value="<?php echo $row['id']; ?>" id="<?php print $row['id']; ?>" />
                 <input type="button" href="#get-content" class="clickme" value="<?php echo substr($row['subject'],0,40); ?>.." id="<?php print $row['id']; ?>"/>
                </td>  
                <td><?php echo $row['date']; ?></td>  
            </tr> 
        <?php
            }   
        ?>
        </tbody>  
       </table>  
       <div id="content">
            The table will be placed here
        </div>

I am loading the records from DB in table. Now when user click on subject line my JQUERY AJAX should display the message in the DIV Content. that is correctly happening but only for first record. and when i click on second record it still display the first record that i dont want what i want is when user click on the record the corresponding message should display and not always first.

actually my JQUERY AJAX is always passing the first record id to message.php which is 10 in my case.

here is the jquery.

<script type="text/javascript" >
    $(document).ready(function(){
        $(".clickme").click(function() {
            $("#content").html('Retrieving...');
            $.ajax({
                type: "GET",
                data: "data=" + $(".data").val(),
                url: "message.php",
                dataType: 'json', 
                success: function(data){
                var msg = data[0];              //get id
                $("#content").html(msg);
                }
            });
        });
    });
</script>

if someone can help me that would be great…

THank you in advance..

Below is the plan HTML

<table class="table table-striped">  
            <thead>  
            <tr>  
                <th>Select</th>  
                <th>From</th>  
                <th>Subject</th>  
                <th>Date</th>  
            </tr>
            </thead>
            <tbody>  
                    <tr>  
                <td> <label class="checkbox"><input type="checkbox"></label> </td>  
                <td>Raj Janorkar </td>  
                <td><!-- <a href="10" id="getmsg">This is proposal for you.....</a> -->
                 <input class="data" type="text" value="10" id="10" />
                 <input type="button" href="#get-content" class="clickme" value="This is proposal for you...." id="10"/>
                </td>  
                <td>2012-08-26</td>  
            </tr> 
                    <tr>  
                <td> <label class="checkbox"><input type="checkbox"></label> </td>  
                <td>Raj Janorkar </td>  
                <td><!-- <a href="11" id="getmsg">All Messages Are Monitored..if we found ...</a> -->
                 <input class="data" type="text" value="11" id="11" />
                 <input type="button" href="#get-content" class="clickme" value="All Messages Are Monitored..if we found .." id="11"/>
                </td>  
                <td>2012-08-26</td>  
            </tr> 
                    <tr>  
                <td> <label class="checkbox"><input type="checkbox"></label> </td>  
                <td>Raj Janorkar </td>  
                <td><!-- <a href="12" id="getmsg">All Messages Are Monitored All Messages ...</a> -->
                 <input class="data" type="text" value="12" id="12" />
                 <input type="button" href="#get-content" class="clickme" value="All Messages Are Monitored All Messages .." id="12"/>
                </td>  
                <td>2012-08-26</td>  
            </tr> 
                    <tr>  
                <td> <label class="checkbox"><input type="checkbox"></label> </td>  
                <td>Raj Janorkar </td>  
                <td><!-- <a href="9" id="getmsg">date...</a> -->
                 <input class="data" type="text" value="9" id="9" />
                 <input type="button" href="#get-content" class="clickme" value="date.." id="9"/>
                </td>  
                <td>2012-08-21</td>  
            </tr> 
                    <tr>  
                <td> <label class="checkbox"><input type="checkbox"></label> </td>  
                <td>Raj Janorkar </td>  
                <td><!-- <a href="1" id="getmsg">...</a> -->
                 <input class="data" type="text" value="1" id="1" />
                 <input type="button" href="#get-content" class="clickme" value=".." id="1"/>
                </td>  
                <td>0000-00-00</td>  
            </tr> 
                    <tr>  
                <td> <label class="checkbox"><input type="checkbox"></label> </td>  
                <td>Raj Janorkar </td>  
                <td><!-- <a href="6" id="getmsg">...</a> -->
                 <input class="data" type="text" value="6" id="6" />
                 <input type="button" href="#get-content" class="clickme" value=".." id="6"/>
                </td>  
                <td>0000-00-00</td>  
            </tr> 
                    <tr>  
                <td> <label class="checkbox"><input type="checkbox"></label> </td>  
                <td>Raj Janorkar </td>  
                <td><!-- <a href="7" id="getmsg">...</a> -->
                 <input class="data" type="text" value="7" id="7" />
                 <input type="button" href="#get-content" class="clickme" value=".." id="7"/>
                </td>  
                <td>0000-00-00</td>  
            </tr> 
                    <tr>  
                <td> <label class="checkbox"><input type="checkbox"></label> </td>  
                <td>Raj Janorkar </td>  
                <td><!-- <a href="8" id="getmsg">Hi want to test you...</a> -->
                 <input class="data" type="text" value="8" id="8" />
                 <input type="button" href="#get-content" class="clickme" value="Hi want to test you.." id="8"/>
                </td>  
                <td>0000-00-00</td>  
            </tr> 
                    </tbody>  
           </table>  
           <div id="content">
                The table will be placed here
            </div>

Answer 1

As MrOBRian mentioned your problem is in $(".data").val(). $(".data") will return a collection of all your inputs with class data on the page.

You should change your selector to something like $(this).siblings('.data').val();. This will give you data inputs next to the clicked button.