php - ボタンが初めてクリックされたとき、最初のクリックで jquery.load() が機能しませんでした

Question

クリックすると、既存のテーブルに新しい行が挿入されるボタンがあります。私が直面した問題は、新しい行が挿入されるために初めて2回クリックする必要があることです。しかし、その後、一度クリックするたびに行が挿入されます。

ボタン：

<input type="button" id="add_po_item" name="add_po_item" value="Add Next PO Item" class="btn" style="width:150px; visibility:visible" onclick="addStock(this, '<?php echo $prod_id; ?>', '<?php echo $poid; ?>'); ">

新しい行を追加する JavaScript 関数:

function addStock(obj, stock_id, poid)
{
        var inputs = document.getElementById('counter').value*1;
        var elemName = "hid"+inputs; 

        if(obj.id == 'add_po_item')
        {
            $('#' + elemName).load("grn_additem.php", { inputs: inputs, stock_id: stock_id, poid: poid } );
        }

        inputs++;
        var table = document.getElementById("add");
        var elem = document.createElement("tr");
        elem.id = "hid" + inputs;
        table.appendChild(elem);

        document.getElementById('counter').value = inputs;
}

grn_additem.php のコンテンツ

<td width="144"><input type="text" id="ttlM3_<?php echo $ctr; ?>" name="ttlM3_<?php echo $ctr; ?>" readonly="readonly" style="border:none; text-align:center" value="0" /></td>
<td width="144"><input type="text" id="m31_<?php echo $ctr; ?>" name="m31_<?php echo $ctr; ?>" onkeyup="calcM3('<?php echo $ctr; ?>')" /></td>
<td width="144"><input type="text" id="m32_<?php echo $ctr; ?>" name="m32_<?php echo $ctr; ?>" onkeyup="calcM3('<?php echo $ctr; ?>')" /></td>
<td width="144"><input type="text" id="m33_<?php echo $ctr; ?>" name="m33_<?php echo $ctr; ?>" onkeyup="calcM3('<?php echo $ctr; ?>')" /></td>
<td width="45">&nbsp;</td>
<td width="144"><input type="text" id="matchcolor<?php echo $ctr; ?>" name="matchcolor<?php echo $ctr; ?>" readonly="readonly" style="background-color:#FF0000" /></td>