How do I create a health system composed of multiple images?

Disclaimer: I should probably mention this now: Since I've decided to just instead learn the engine on my own as I used it and developed software for it, just like learning a board game as you've played instead of going over the whole manual, you can probably expect me to ask questions frequently about different matters, even if they seem outside my skill level. I've decided I wouldn't feel comfortable starting small and going up from there; I've decided to just start on potentially big(ger) projects split up into smaller ones and just simply learn the engine and its syntax as I went, since I personally don't think following YouTube tutorials is going to help much, at least not with starting small. Yes, there might still be some content I could learn from, but I'm just going to stick to learning as I use the engine the majority of the time. I know it seems like I'm doing a very bad practice, I'll admit, but I've decided that's just the way I wanted to go if it works for me. Thanks for listening.

Also, this is just the basic process on how to form the base health system, I may need further help with decreasing/increasing health or dynamically adjusting maximum health, among other things.

Basically, I'm trying to work on a health system for my Princess Peach fangame prototype, and I have absolutely no idea which direction to go at this point. I plan on using a single UI sprite copied over ten sections which can go down by touching an enemy or just simply pressing a button as debug. My "final" code is supposed to copy the heart units over to their corrasponding places as in an order via rectTransform, but for whatever reason that I cannot figure out, the sprites actually get "bunched up" in a very incorrect place on the screen, rather than as intended. In one of the screenshots, the sprites end up in the very top near left corner of the screen. Actually, they aren't actually bunched up; the code actually generated "ghost" sprites that do not show up at all even when within the usual rectTransform boundaries; they're basically invisible - and they're enabled, so they're technically supposed to show up in the first place. As one other thing, the code actually produces way too many of these sprites, rather than the 10 I've intended.

I should also mention the key word "fangame"; I know that being a website for potentially professional programmers, that this may be strongly frowned upon, but y'all could just make an exception to this, since the problem would refer to a general setting anyway, and that's just the way I've decided to do things anyway, so it's all okay. Also, I know I am using Nintendo assets, but for the same reasons I've mentioned, it should be all fine.

I'm using UI sprite elements for this process, and the images and "final" code will all be displayed at the bottom. The top image is where the unnecessarily high amount of UI sprites generated by the code itself are, and the strange and unintended way they're laid out in the hierarchy, as well as the incorrect placement of the "hearts" themselves. And pay attention to the Rect X Positions on the very bottom right of the second image in the two sections of it; this is where the latter problem is occurring with the "ghost" UI sprites. The "final" code can be dissected to figure out the potential problem with the code, if there is any.

 // Start is called before the first frame update
     void Start()
     {
         //Instantiate(Heart, HeartPosition);
         //HeartRectPosition.anchoredPosition = new Vector2(30, 0);
         
         for (int HeartY = 0; HeartY < 2; HeartY++)
         {
             for (int HeartX = 0; HeartX < 5; HeartX++)
             {
                 HeartRectPosition.anchoredPosition = new Vector2(-200 + (30 * HeartX), 100 + (26 * HeartY));
                 Instantiate(Heart, HeartRectPosition);
             }
         }
     }

If you need any further information, please let me know. Thanks for listening. Have a nice day.