jquery - Jquery と Ajax を使用してテーブルの行を更新する

Question

問題：

AJAX/JQUERY を使用してテーブルの行を更新しようとすると、行が更新されますが、古い行が置き換えられるのではなく、テーブルの上部に表示されます。添付の画像を参照してください。

コード

update と refresh を呼び出す関数は次のとおりです。

function ajaxRefresh(sid, dbitem, newinfo)
    {   
        // sid -> spiceID
        // dbitem -> image, fill, etc
        // newinfo -> what to update
        // refreshDiv -> image/spice


        var loadUrl = "update.php"; // 
        var ajax_load = "<img src='images/load.gif' alt='loading...' />"; // loading gif/image
        var toBeReloaded = "#siditemrow" + sid;

        alert("Sid: " + sid + " dbitem: " + dbitem + " newinfo: " + newinfo);


        $(toBeReloaded).html(ajax_load);

        $.get(
            loadUrl,
            {sid: sid,
             dbitem: dbitem,
             newinfo: newinfo},
            function(responseText){
                $(toBeReloaded).html(responseText);
            },
            "html"
        );
    }

そして、これは私のテーブルのアーキテクチャの例です。単一の行しかないと仮定しています:

<table cellspacing="0">
            <thead>
                <tr>
                    <th class="image">Image</th>
                    <th class="spice">Spice</th>
                    <th class="cost">Cost</th>
                    <th class="notes">Notes</th>
                    <th class="coupons">Coupons</th>
                    <th class="control">Chef Controls</th>
                </tr>
            </thead>
            <tbody>

            <!-- Ajax Refresh of entire row-->
            <div id="siditemrow#">
                <tr class="alt"> OR <tr>
                    <td class="image" align="center">
                        <!-- Ajax Refresh of fill update -->
                        <div id="siditemfill#">
                            <div class="outergreen">
                                <div class="imagegreen">                                 
                                    <!-- Ajax Refresh of image update -->
                                    <div id="siditemimage#">
                                        <img class="itemimage" src="resources/images/imagesource.png"/>
                                    </div>
                                    <!-- Ajax Refresh of image update -->                                  
                                </div>
                            </div>
                        </div>
                        <!-- Ajax Refresh of fill update -->                      
                    </td>
                    <td class="spice">spicename</td>
                    <td class="cost">~$#.##</td>
                    <td class="notes">description</td>
                    <td class="coupons">link & store</td>
                    <td class="control">
                        <!-- Ajax Refresh of fill update -->
                        <div id="siditemchefcontrols<?php print $row['sid']; ?>">
                            <img class="more" src="images/uparrow.png" onClick="itemFill('up','currentquantity','id#')" />
                            <img class="less" src="images/downarrow.png" onClick="itemFill('down','currentquantity','id#')" />
                            <img class="addimage" src="images/photoupload.png" onClick="openImageUpload('id#')" />
                            <img class="settings" src="images/settings.png" />
                        </div>
                        <!-- Ajax Refresh of fill update -->
                    </td>
                </tr>
            </div>
            <!-- Ajax Refresh of row update -->


            </tbody>
        </table>

テーブルの上に配置された php スクリプトによって作成されたコードは、

<div id="siditemrow#">

そして閉店です

</div>

質問:

1. 置き換えるはずのコンテンツの上に表示されないようにテーブルの行を更新するにはどうすればよいですか? （私は何を間違っていますか？）
2. ユーザーが開始した更新のために JQuery と Ajax を使用する最も効率的な (応答時間が最も速い) 方法は何ですか? (コードとアプローチの両方)
3. AJAX/JQuery の効率/時間を向上させるためのその他のヒント/コツはありますか?

ありとあらゆる助けに感謝します！ありがとう！

編集: テーブル構造のコードは、読みやすくするために PHP の部分が置き換えられていることに注意してください。すべての行には、PHP によって生成された div とコンテンツの一意の識別子があります。