Setting a variable equal to a class property and pushing it to an array each time it changes also updates all the values that was pushed to the array?

So I created a game of Pong using HTML Canvas and an AI that calculates and predicts the position of the ball in the instant that it hits the opposite paddle. I called it "PONG-BEAST v1.0" for the lack of a better name lmao. You can even play the first version of this game on this link: https://yurokazuma08.github.io/PONG-BEAST/.

The calculations are actually pretty good but still has some errors that scale with the ball's velocity. I tried fixing my calculations but couldn't really clean it to perfection, and that's when I started to watch videos about Neural Networks and learn about them.

This is actually my first time using brain.js and neural networks and I just thought that this Pong AI that I have created would be a good starting point for me to learn more about it. Technically speaking, I wanted to gather all the data in the game and present is as a Training Data for a Neural Network using brain.js. But I'm currently having trouble recording my input data from the game, here's a summary of what I did:

1. Defined a global variable called "trainingData" and set it equal to an empty array;
2. Defined a global variable called "input" and set it equal to a new Array with length of 4;
3. Defined a global variable called "output" and set it equal to undefined.
4. Each time the ball hits a paddle, I set the input variable equal to the X and Y values of its position and velocity, the 4 necessary values to calculate for predicting the desired output.
5. Each time the ball hits the opposite paddle, I set the output variable equal to it's Y position. (NOTE: The Paddle only moves UP and DOWN which explains why the Y position of the ball is only returned as the desired output value.)
6. Right after giving a value to the output variable, I push both the input and output to the trainingData array, and then loop back to step 4 continuously to populate the trainingData array

Now here are the problems I have encountered with this approach:

I actually did step 4 (from the procedure stated above) in 2 different ways and experienced 2 different bugs in the process. The first approach was this:

input = [
    (pong.position.x - pong.radius - player1.position.x - player1.width) / (player2.position.x - player1.position.x - player1.width - (pong.radius * 2)),
    (pong.position.y - pong.radius) / (canvas.height - (pong.radius * 2)),
    (pong.velocity.x + 25) / 50,
    (pong.velocity.y + 25) / 50
]

Using this approach caused problems with the AI Calculations and seems to have affected and changed the values somewhere in my code, and that lead me to trying the second approach which was this:

input[0] = (pong.position.x - pong.radius - player1.position.x - player1.width) / (player2.position.x - player1.position.x - player1.width - (pong.radius * 2));
input[1] = (pong.position.y - pong.radius) / (canvas.height - (pong.radius * 2));
input[2] = (pong.velocity.x + 25) / 50;
input[3] = (pong.velocity.y + 25) / 50;

That seems to have solved the issues cause by the first approach, but it has created another bug that I can't seem to understand what's happening. Each time I push a new input to the trainingData array, all the other inputs seem to copy the value of the latest input data that has been pushed into the array, but it doesn't do that for the output data. I really can't understand what's going on and why pushing another input data changes all the inputs that have been already pushed beforehand.

Here are photos of the Pong Game, the codes I have written for the execution of Step 4, and the trainingData that I get from it:

PONG-BEAST v1.0

Step 4 done using the first approach

Step 4 done using the second approach

trainingData

What could I have possibly done wrong? Being able to understand the bug that I'm currently experiencing will be a very big help for me personally in learning JavaScript, so yeah thanks a lot in advance to anyone who tries to answer.