jquery - jQuery ループとキーアップ時の動的リストの追加

Question

と の 2 つのフィールドを持つ単純なフォームを作成しようとしていlabelますvalue。これらのフィールドに入力した後、ユーザーがEnterキーを押すと、さらに 2 つのフィールド (ラベルと値) が表示されます。これまでのところ、すべてをうまく機能させることができました。ここで、順序付けられていないリストを作成するために、各ラベルと値フィールドからの入力データが必要です。

キーが押された場合、Enter2 つの新しいテキスト フィールド (ラベルと値) を作成し、入力データをコピーしてli要素内に表示します。繰り返します。

私が試したコードは以下のとおりです。keyup関数のループがありませんが、それがなくても、li2 つの新しいフィールドを作成した後にのみ要素が表示されず、最初の 2 つの編集に戻ります ( JSfiddleを確認してください)。この関数でループをコーディングしようとしましたが、すべてが失敗したため、ここに投稿することを考えました。おそらく、これはすべて間違っています。

これは HTML コードです。

<button id="addChart">Add Chart Label and Value</button>
<div id="label">
    <p>
        <label for="label">
            <input type="text" id="labelrow" size="20" name="label" value="" placeholder="Input Label" />
        </label>
        <label for="value">
            <input type="text" id="valuerow" size="20" name="value" value="" placeholder="Input Value" />
        </label>
    </p>
</div>
<ul class="jrGraph">
    <li>
        <span class="label"></span>
        <span class="value"></span>        
    </li>
</ul>

これは jQuery スクリプトです。

$(function () {
    var scntDiv = $('#label');
    var i = $('#label p').size() + 1;

    $('#addChart').on('click', function () {
        $('<p><label for="label"><input type="text" id="labelrow" size="20" name="label_' + i + '<p><label for="value"><input type="text" id="valuerow" size="20" name="value_' + i + '" value="" placeholder="Input Value" /></label> <a href="#" class="remScnt">Remove</a></p>').appendTo(scntDiv);
        i++;
        return false;
    });

    $('#label').keyup(function (event) {
        if (event.keyCode == 13) {
            $('#addChart').click();
            $("#labelrow").on("keyup change", function () {
                $('span.label').text(this.value);
            });
            $("#valuerow").on("keyup change", function () {
                $('span.value').text(this.value);
            });
        }
    });

    $('#label').on('click', '.remScnt', function () {
        if (i > 2) {
            $(this).parents('p').remove();
            i--;
        }
        return false;
    });
});

そしてJSフィドル。