They are following the same path. They are just not sitting on the same spot.
All of those superfluous circles make it hard to troubleshoot your SVG because is a ton of code to read through. I can see you have some translation transform, matrix transform and data-svg elements on your SVG, they will be throwing your shapes off position.
I know it is hard for you to know what to keep and what to not include when making a demo, you will get better with time. Just try and have as little code in there as possible to illustrate what you are trying to achieve. Two black squares going around one thick line is all you need in here. That will make spotting mistakes an order of magnitude easier.
I would love to set an example up for you showing how little you need but I have to be bad cop here and make you do homework. Sorry.
So, for now, remove all these other bits from your svg until you have the bare minimum. Put the animation back in and we will work on the offsetting of the second block after that.