jquery - Jquery動的テーブルを作成しますか?

Question

.append で作成した JQuery を使用して動的テーブルを作成する方法ですが、もう一度クリックすると問題が発生するので、別のテーブルを作成しますが、同じテーブルに追加したいので、どうすればよいでしょうか。

$(function () {
    $("#addProduct").click(function () {
        var table = $('<table></table>').addClass('foo');
        for (i = 0; i < 10; i++) {
            var row = $('<tr></tr>');
            for (i = 0; i < 10; i++) {
                var row1 = $('<td></td>').addClass('bar').text('result ' + i);
                table.append(row);
                row.append(row1);
            }
        }
        $('#someContainer').append(table);
    });
});

これはHTMLです

<button id="addProduct">Add Product</button>

<div id="someContainer"></div>