nestable & field-adder do not work together

[Xon]

Affected version

2.3.7

The field-adder js isn't compatible with the nestable javascript. This is because field-adder doesn't apply the data-increment-format attribute to the top-level element which is being cloned.

This sort of HTML structure is almost valid but data-id isn't updated so sorting doesn't work as expected.

<div class="nestable-container" data-xf-init="nestable" data-max-depth="1" data-parent-id="">
...
<li class="inputGroup nestable-item" data-id="{$inputName}[{$nextCounter}]" data-xf-init="field-adder" data-increment-format="{$inputName}[{counter}]">
                <div class="nestable-handle" style="position:relative" aria-label="{{ phrase('drag_handle')|for_attr }}"><xf:fa icon="fa-bars" /></div>
                <xf:textbox name="{$inputName}[{$nextCounter}][0]" placeholder="{{ phrase('size') }}" size="20" />
</li>
...
</div>