I'm a beginner and I was making this project that would help me count sets in the gym. I'm trying to make it so I can access the children IDs of a newly created div. (I'm using javascript instead of typescript)

const newRow = `<div class="flex flex-row justify-between w-full text-[22px] font-medium my-[10px]">
      <div class="flex items-center list-disc">
        <li class="ml-[25px]">
          <input class="w-[400px] border-2 border-yellow-500"></input>
        </li>
      </div>
      <div class="relative flex items-center">
        <input id="maxSets${rowNumber}" class="w-[18px] text-right border-2 border-yellow-500" value="0"></input>
        <a>x|</a>
        <a id={sets${rowNumber}} class="mr-[75px]">0</a>
        <img alt="Checkmark" fetchpriority="high" width="25" height="1" decoding="async" data-nimg="1" class="absolute mr-[10px] right-[20px]" style="color:transparent" srcset="/_next/image?url=%2Fgreen.png&amp;w=32&amp;q=75 1x, /_next/image?url=%2Fgreen.png&amp;w=64&amp;q=75 2x" src="/_next/image?url=%2Fgreen.png&amp;w=64&amp;q=75">
      </div>
    </div>`;

      let currentSets = document.getElementById(`sets${i}`);
      let currentMaxSets = document.getElementById(`maxSets${i}`);

(Later I increment the rowNumber)

I can't use useRef here because I'm constantly creating new pieces of code during using the app.

I made a separate project so I could test it further and it turns out that the document is the problem. I'm not familiar with how DOM works in react, so I just don't know how to avoid that.

I'm sorry for asking such a dumb question but I just couldn't find the answer online.

(I know the code is probably messy and stupid but I'm still learning) The whole code is in the file