This is still reproducible in v13 main. I created a patch https://review.typo3.org/c/Packages/TYPO3.CMS/+/85083 for this.

Analysis¶

I could boil it down to this file Build/Sources/TypeScript/backend/form-engine/container/flex-form-section-container.ts :

  private registerCreateNewContainer(): void {
    new RegularEvent('click', (e: Event, target: HTMLElement): void => {
      e.preventDefault();
      this.createNewContainer(target.dataset);
    }).delegateTo(this.container, Selectors.addContainerSelector);
  }

When clicking the button, this event is fired multiple times at once, instead only for the one button you clicked. So as many buttons as there are in your flexform element, as many times the event is fired. Sadly I don't know enough JavaScript on how to limit the event for the actual button.

Steps to reproduce¶

• Apply patch https://review.typo3.org/c/Packages/TYPO3.CMS/+/85083
• Clear cache, run DB analyzer compare (new field created)
• Check out the EXT:styleguide element "Form engine - flex" as a new record
• Go to the tab "complex"
• Inside tab "backend.flexform.servicebox.tab1" click on the bottom link "backend.flexform.servicebox.li..."
• Now two items will be added to the "links" section, and a "console.log" JS statement will appear twice
• Save the record
• Edit it again
• Click on a trashcan of that tab to delete one of the items. Two modals will appear, also the JS statement appears twice.

See attached video (GIF).

Solution¶

It should all fall into place if the event fired is only done on the one specific button, and not all instances with a matching selector

Patch set 2 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/85083

Patch set 3 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/85083

Patch set 4 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/85083

The attached patch should resolve that, votes/comments in that patch are welcome if you can try it out. The actual reason for this was not JavaScript at all, but that the same flexform container name was just referenced in HTML via:

<div id="flexform-section-container-fieldName-flexformField-4711">

but now the flexform sheet name is also attached, making the field unique then:

<div id="flexform-section-container-sheetName-fieldName-flexformField-4711">

This should fix all reported issues: Duplicate items only in the first section and not the "real" one, and inability to remove an item without getting two modals overlaying each other.

Patch set 1 for branch 12.4 of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/85097