Custom embedded data not working correctly all of a sudden

I have the code inputted correctly in the look & feel body and header (e.g., Qualtrics.SurveyEngine.setEmbeddedData("circle-drag-3test100-overlap", overlapPercentage);
Qualtrics.SurveyEngine.setEmbeddedData("circle-drag-3test100-distance", leftPos);) and the embedded data in the survey flow. The math is set to measure both how far away they drag the two circles and how much they overlap:
The data was being collected correctly at first, but now it no longer is. See picture with first lines correct. All incorrectly recorded seem to be repeating the same overlap and percentage numbers.

At first, I thought that it started recording it incorrectly because I created some attention check items & if they didn't respond, then the survey branches to the attention item again. So, I just created an attention item 2 instead of looping back. But it is still happening, and upon closer examination of the output it started recording incorrectly BEFORE this 😅
Any ideas why this would suddenly stop recording correctly?
Some things I did after that point: I put page breaks between each custom graphics item. I added more of them in each block & now there are 18 in the survey flow. I added the embedded data in the survey flow (most of the initial correct data are retrospectively recorded after doing so!) Also, the first items did not contain numerical ids for the embedded data, e.g, circle-drag-test100-overlap.
I'm fairly new to this so I am just racking my brain for any possibility. I'm about to test/troubleshoot all these possibilities, but any expertise on the matter would be greatly appreciated!