YUI3 DataTable add two rows - datatable

Question

I am trying to modify the the YUI dataTable to add rows dynamically after the dataTable is created but instead of adding one new row it adds two.
My code:
var index = 0;
YUI({
filter: 'RAW'
}).use([
'node',
'io',
'datasource',
'json-parse',
'json-stringify',
'datatable',
'datatable-sort',
'datatable-mutable',
'datatable-scroll',
'datatable-paginator',
'model-list'
],
function(Y) {
var dataTableColumns = [
{
key: 'id',
label: '#'
},
{
key: 'name',
label: 'Name',
allowHTML: true,
formatter: function (valueObject) {
return valueObject.name;
}
}
];
var dataTable = new Y.DataTable({
width: "100%",
columns: dataTableColumns,
plugins: [{
cfg: {
highlightRange: false
},
fn: Y.Plugin.DataTableHighlight
}]
}
);
dataTable.render('#dataTableDiv');
var dataSource = new Y.DataSource.IO({
source: "/localhost/data/"
});
dataSource.plug({fn: Y.Plugin.DataSourceJSONSchema, cfg: {
schema: {
resultFields: [
{key: "id"},
{key: "name"}
]
}
}});
dataTable.plug(Y.Plugin.DataTableDataSource, {
datasource: dataSource
});
dataTable.datasource.load();
Y.one("#addButton").on('click', function (event) {
index++;
var rowData = {
id: index,
name: "Test row"
};
dataTable.addRow(rowData, {index: 0});
});
}
);
So After DataTable is created I have:
And after dataTable.addRow(rowData, {index: 0}); I have: