Change this
function addData(category,cost)
{
var costsArr = [0,0,0,0];
// body
to this
var costsArr = [0,0,0,0];
function addData(category,cost)
{
// body
to make costsArr in the global scope such that it doesn't reset each time you call addData. The way it is currently written will reset each value to zero when you call addData because costsArr gets defined when the function is called. If defined in the function the costs array will be deleted from memory once the function ends.
Let Me Explain
Objects (or most variables in javascript including your cost array) are stored in memory and their corresponding variables only hold the location in memory that the corresponding objects exists at.
Something called the garbage collector removes objects from memory once no variables no longer know about it.
Thus consider the life of a function. Once it is finished, if no other functions are running in it's scope that can access the variables it defined, all that memory is now inaccessible. So the garbage collector deletes it. Hence why costsArr is deleted.
So to circumvent this you need either create a global variable, outside of the function, to create persistent data for that function.