Collection 'add an item' button not working

[enriquekreuk]

Umbrella version affected

6.4

Description

When there is one or more one-to-many relation in a collection, the button 'add an item' does not have an add event anymore. The first child event still works and adds a new a entry and also a new entry for the parent. The other child add button works as it should be.

If there are no entries in the collection the add buttons works fine. But if you have at least one entry in the collection (and it is saved and re rendered server-side) it is broken.

I have added a one to many relation in the demo as example. See the gif in the additional context field what happens when you try to add a new entry.

What likely the problem is that de querySelector search for the first button. But when there is already an other button rendered earlier on in the HTML tree, the parent button is not found.

function o() {
                var e;
                return function(e, t) {
                    if (!(e instanceof t))
                        throw new TypeError("Cannot call a class as a function")
                }(this, o),
                (e = i.call(this))._prototype = e.dataset.prototype,
                e._prototype_name = e.dataset.prototypeName,
                e.index = parseInt(e.dataset.index),
                e.maxLength = parseInt(e.dataset.maxLength),
                e.sortable = "true" === e.dataset.sortable,
                e.addAction = e.querySelector(".js-add-item"),
                e.deleteActions = e.querySelectorAll(".js-del-item"),
                e.itemsContainer = e.querySelector(".js-item-container"),
                e
            }

How to reproduce

Create a one-to-many in a UmbrellaCollection and try to use the add button. when you have at least one entry in the collection.

Additional Context