javascript - 複数のフィールドでの jQuery のぼかしの問題

Question

ユーザーが必要な数の行を追加できる動的な見積もりフォームを作成しようとしています。「reCal」のクラスで入力フィールドに入力した後、合計価格フィールドを計算したいと思います。

<div class="orderItem">
<div class="row col2">
<input class="reCal nvo" id="iQty" name="item[1][qty]" placeholder="1" value="" />
</div><!--col2-->
<div class="row col3">
<input class="ctp reCal nvwdo currency" id="iPrice" name="item[1][price]" placeholder="100.00" value="" />
</div><!--col3-->
</div><!--orderItem-->

<div class="box">
<p>Net Total (£)</p>
<input class="noh" id="netTotal" name="netTotal" type="text" readonly="readonly" value="0" />
</div>

これは私が現在持っているjQueryです。

$(document).ready(function(){

    $('.reCal').blur(function(){
        calculate();
    });

    function calculate(){
        var net = 0;
        $('.ctp').each(function(){
            net += parseInt($(this).val());
        });
        $('input#netTotal').val(net.toFixed(2));
    }
});

このコードは合計を正しく計算しますが、他のすべての入力ボックスのクラスが同じであっても、ぼかし関数は最初の入力ボックスでのみ機能します。

おそらく私の問題が .after() コマンドを使用して新しい行を書き込むことに起因するかどうかはわかりません。ただの理論ですが。