Overwriting the ID of one HTML element with the text of another

Question

I use CMS Webflow (CMS Feature of a website builder) to build HTML elements that repeat themselves. Webflow duplicates these automatically. Unfortunately, it also duplicates the IDs of the element itself and all nested elements, making them non-unique. For various reasons, I have to use this feature.

Now I use an embedded script to overwrite the ID of a particular nested HTML Element (Heading) with the innerText of another (also Heading). Both elements sit inside the mentioned element that is automatically being duplicated.

The second headings text (the reference heading whose text I want to grab) is automatically filled by the CMS feature and therefore unique.

But when I log the new Id of the first heading to the console (which was overwritten with the innerText of the second heading) it's just empty. In the following code I've added comments (// alternatively:) with alternative code lines, which make the code work, but not as desired.

<script>
    $(document).ready(function(event) { 

    let elementToBeChanged = $(event.target).next("#changeMyId");
    let elementWithReferenceText = $(event.target).parent().next("#useMeToChangeId");
    // alternatively: let elementWithReferenceText = $(this).find("#useMeToChangeId");

    let newId = elementWithReferenceText.text();
    // alternatively: let newId = Math.floor(Math.random()*6) // to verify that generating a unique ID each time the element gets duplicated is possible (it is)

    console.log(newId) // to compare with console.log(elementToBeChanged.id) if ID was changed correctly
    elementToBeChanged.id = newId;
    console.log(elementToBeChanged.id); // to check if ID was changed 
});
</script>

I think the problem with the code is that does not select the correct second heading. Oddly with this jQuery selector it works:

let elementWithReferenceText = $(this).find("#useMeToChangeId");

But obviously always overwrites the ID with the same value every time since it's not a relative path.

Unfortunately, the relative path does not work, the console.log(newId) logs just empty to the console (I assume this line is the problem):

let elementWithReferenceText = $(event.target).parent().next("#useMeToChangeId");

I used the following to verify that generating a unique ID each time the element gets duplicated is possible (it is)

let newId = Math.floor(Math.random()*6)

What am I doing wrong?

Answer 1

I would suggest you query for all elements with the ID and change them as desired. Your script tag would have to be after all the elements that have been duplicated

Array.from(document.querySelectorAll("#duplicate"))
  .forEach((el, index) => {
    if (index > 0) {
      el.id = el.id + "-" + index;
    }
  });

Array.from(document.querySelectorAll("p"))
  .forEach((el, i) => {
    console.log(`Element index ${i}, id: ${el.id}`)
  });

<p id="duplicate">

</p>

<p id="duplicate">

</p>

<p id="duplicate">

</p>