Array from server causing strange append behaviour in ajax success callback function?

//FIRST ARRAY OF DATA FROM SERVER: arrayOne = A:1,B:2,C:3.
//SECOND ARRAY OF DATA FROM SERVER: arrayOne = A:4,B:5,C:6.

//ajax success call back:

function (data) {
    var i = data.arrayOne.length - 1;
    var Parent = $('<div>',{'class':'parent'}).appendTo('body');
    var A = $('<h1>',{'class':'columns a','text':data.arrayOne[i].A}).appendTo('.parent');
    var B = $('<h1>',{'class':'columns b','text':data.arrayOne[i].B}).appendTo('.parent');
    var C = $('<h1>',{'class':'columns c','text':data.arrayOne[i].C}).appendTo('.parent');
}

//FIRST CALLBACK RETURNS: "123" appended as expected
//SECOND CALLBACK RETURNS: "123456 456" appended (expected output = 123 456).

After both callbacks, the "Parent" div from the first callback has "123456" appended to it, The "Parent" div from the second callback has "456" appended to it). Why is this happening, if I console.log instead of create the elements, it doesn't happen, so it has specifically to do with the elements being created.

Image of problem in Chrome for clarity: http://ift.tt/1bKWaoy

(Using Node.js and Express).