Record ajax content

Dear all I have searched in this form and others but cant solve my problem, please help. I have several rows and each of them has hidden (next) rows for details of this row. I want to click on any row and see the details of the clicked product. The problem I am facing is that when I click on the first and then second row, the first row automatically gets the same values as second.

<script type="text/javascript">
    $(document).ready(function(){

        $("#items tr.itemDetail").hide();
        $("#items tr.data td.clicka开发者_如何转开发ble").click(function(){
             $("#items tr.itemDetail").hide();                                                           
            $(this).parent().next("tr").toggle().toggleClass('highlight');              
            $.ajax({
                url: "<?php echo site_url('progress/getAppDetails'); ?>",
                type: 'POST',
                data:'app_id='+$(this).parent().attr('id'),
                success: function(msg) {
                    $("tr[id^='det']").html(msg);// want to   record/leave data, but instead updates all the fields.
                }
            });

        });

and the table

        <tr class='data' id=".$row['aid'].">
        <td class='clickable'> ".$row['aid']."</td>
    </tr>

<tr class='itemDetail' id=det".$row['aid'].">
    <td colspan='4'>Details of the product</td>
</tr>       

try this :

  success: function(msg) {
                    $(this).next('.itemDetail:first').html(msg);
                }

tip :

dont ever use this kind of setting value as

id^='det'

use classes and id's.