четные данные не меняются

вот моя собственная демонстрация практики, она работает хорошо, как я ожидаю. но когда я использую строку 8 (комментарий к моему демо-коду) вместо строки 7, значения входного текста все меняются на 0, что отличается от результата демонстрации demo.

я смотрю на веб-сайт jquery, это только дает мне это

Описание: Необязательный объект данных, переданный методу события, когда текущий обработчик выполнения привязан.

я думаю, что результат использования строки 8 или строки 7 должен быть одинаковым, поскольку я присваивается счету объекта, но это не так. Может кто-нибудь объяснить мне об этом вопросе. кстати, если кто-то сможет реорганизовать мой код, будет еще лучше THANKS !!

вот мой код

var i = 0;
$("#aa").on("click", {
    count : i       
}, 
function(event) {
    var div = $('<div/>');
    var input = $('<input />').attr("value", event.data.count);
    event.data.count++;
    //i++;
        var bt = $('<input />').attr({
            type : "button",
            value : "remove",
        });
        div.append(input);
        div.append(bt);

        var index = $("div").length;
        if (index == 0) {
            $("#aa").after(div);
        } else {
            $("div").last().after(div);
        }

        bt.on('click', function(event) {
            $(this).parent().remove();
        });
});