javascript - for ループと HTML 入力を使用して Javascript で配列を作成する

Question

HTMLフォームで一連の入力をインデックス化しました。

入力をループして配列を作成したい。その配列からフィールドの合計 (合計) を収集し、最後に別の HTML 入力を追加してその合計を表示したいと考えています。

PHPでこれを行う方法は知っていますが、JavaScriptに苦労しており、クライアント側で行う必要があります。

私はこれを可能な限り構築しようとしました。ここにjsFiddleがあります：

これが私のhtmlです：

<div style="padding:5px;clear:both;"><input type="text" name="total_inkind" id="total_inkind" placeholder="$" onchange="calcInKind()"></div>

および Javascript:

function calcInKind() {
    var runningTotal = 0;
    var i = 0;
    for (var i = 0; document.getElementById('inkind').value; i++){
        if(document.getElementById('inkind').value != ''){
            $gwyl_gr = document.getElementById('inkind').value;
            $runningTotal = parseFloat($runningTotal) + parseFloat($gwyl_gr);
            }else{
            $gwyl_gr = 0;
            }
            i = i++;
        }
    document.getElementById('total_inkind').value = $runningTotal;
    }