I have a mouseover function to get data from the database based on the value of each row. However, it is returning the same values for all row

Question

I need help. I am experimenting with J QUERY for the first time. I have a mouseover function to get and display data from the database based on the row id. However, I am getting the same value for all the rows. Thanks!

 while($stmt->fetch()){?>

                <td class="other">
                    <input type="hidden"  class="rowid"  value="<?php echo $id ?>"/>
                    <?php echo round($other,2); ?>
                   </td>

        <?php             
        }
        ?>
        //jquery code:
        $(document).ready(function(){
            $(".other ").mouseover(function(){
                var rowid = $('#rowid').val();
                $.get('other.php',{postrowid:rowid},
                    function(data)
                        {
                      $('#otherResult').html(data);
            $('#otherResult').show();
            $(".other").mouseout(function(){
            $('#otherResult').hide();
        });
                    });
                }); 

Answer 1

// Change:
var rowid = $('#rowid').val();

// To:
var rowid = $('input', this).val();

---

Sidenote: Instead of using a hidden field, you can add data to related tags using HTML5 data-* attribute:

<td class="other" data-id="<?php echo $id ?>">
    <?php echo round($other,2); ?>
</td>