jquery - 行が動的に追加され、行に表示される列で計算を実行するときに、テーブルの最後に行を追加する

Question

テーブルの最後に、「合計」列 (テーブルの 4 列目) の合計を示す小計行が必要です。

問題: 行が正しく追加されていません。「subtot」行は、他のすべての行が追加された後、テーブルの最後にのみ追加されます

問題: 計算部分がめちゃくちゃです

問題: jsfidle を入れると、選択ボックスを変更できませんが、ローカルで変更できました。

私はこれをプログラムしようとしてひどい道をたどったと思いますが、それを成し遂げるためのもっと良い方法があると確信しています.

選択ボックスが変更されるたびに4番目の列が更新され、変更されたときにその値が必要になるため、以下のコードのようなことをしようとしました。

.text()-0 を使用したのは、4 列目の値が数値であることに問題があると思ったからです。

ご参考までに。このコードは、私がjsfiddleで示しているものとは少し異なります

$("select").change(function(){
    var $fourth = $('.row td:nth-child(4)').text()-0;
   if(isNaN($fourth)) {
  //just to test if number
    $('.row td:nth-child(4)').css("color", "green")
   }
    // alert($.type($fourth))
  var row = $('.row td:nth-child(4)').parent()
    $('.row td:nth-child(4)').each(function(){
        qnty = $(this).siblings('.select').val()-0;
        alert(qnty);
        total =  parseFloat($(this).text()-0) * qnty;
       $('tr.subtot td:nth-child(4)').html(total)
    })
});

サブトット行の追加は以下のとおりです。これは、私の知識で今できる最善のことです。使い方に何か問題があると思います。削除する （）

   if($(".subtot").length && $(".subtot:not(:last-child)")){
        $(".subtot").remove();
    }else{
    $("table:nth-last-child(1)").append('<tr class = "subtot"><td></td><td></td><td></td><td>test</td></tr>')

    }

私はjqueryの学習を始めたばかりで、これを理解するのを手伝ってくれれば、私の学習プロセスに役立ちます.