Cannot add to pre-poulated nested repeater

[LWS-Web]

Hi there,

Iam building a nestes sortable repeater with the help of your plugin.

The setup is like this:

<repeatable fieldset>
  <fieldset_inputs>
  <repeatable options>
    <option_inputs>
  </repeatable options>
</repeatable fieldset>

This works fine, I can add new fields, sort them and save them.
I can retrieve saved values from my database and add pre-populated fields.

The first level of these pre-populated fields are working fine.
I can add new top level elements without a problem.

But I CANNOT add sub-level elements.

I get an error, if i click on the "Add Option" button to add another new nested element, to already existing elements:

Uncaught TypeError: $(...).children(...).clone().removeClass(...)[0] is undefined
[repeatable-fields.js:71:81]

For the pre-populated fields, I add counters in my PHP to replace the "row_count_placeholder".
These counters look right, they start with 0 on the first element.
On the top level, if I add a new parent, the new added element gets the next correct number.

I also remove the class "template" from the pre-populated elements.

My HTML:

echo '<div class="repeat">';
echo 	'<div class="wrapper">';
echo 		'<span class="add button button-secondary">Add Fieldset</span>';
echo 		'<ul class="container">';

// CREATE PRE-POPULATED FIELDS
// here I get the error if I click on "Add Option"

$counter = 0;

if ( $saved_fields ) {
	foreach( $saved_fields as $fieldset ) {
		
		$fieldset_title = $fieldset['title'];
		$fieldset_desc = $fieldset['desc'];
		
		echo '<li class="row">';
		
			echo '<span class="move">Move</span>';
			
			echo '<p>';
			echo 'Fieldset Title<br>';
			echo '<input type="text" name="fieldset['.$counter.'][title]" value="'.$fieldset_title.'" class="form-control" />';
			echo '</p>';
			
			echo '<p>';
			echo 'Fieldset Description<br>';
			echo '<input type="text" name="fieldset['.$counter.'][desc]" value="'.$fieldset_desc.'" class="form-control" />';
			echo '</p>';
			
			echo '<div class="wrapper">';
			
				echo '<span class="add button button-secondary">Add Option</span>';
		
				$counter_options = 0;
		
				if( $fieldset['options'] ) {
					
					echo '<ul class="container">';
					
					foreach( $fieldset['options'] as $option ) {
						
						echo '<li class="row">';
						
						echo '<span class="move">Move</span>';
						
						$option_title = $option['title'];
						$option_desc = $option['desc'];
						$option_img = $option['img'];
						$option_price = $option['price'];
						
						echo '<p>';
						echo 'Option Title<br>';
						echo '<input type="text" name="fieldset['.$counter.'][options]['.$counter_options.'][title]" value="'.$option_title.'" class="form-control" />';
						echo '</p>';
						
						//... some more fields here ...
						
						echo '<span class="remove">Remove Option</span>';
						
						echo '</li>';
						
						$counter_options++;
					}
					
					echo '</ul>';
					
				}
			
			echo '</div>';
			
			echo '<span class="remove">Remove Fieldset</span>';
		
		echo '</li>';
		
		$counter++;
		
	}
}


// EMPTY ROWS USED AS TEMPLATES
// this is working if I add totally new elements

echo '<li class="template row">';

	echo '<span class="move">Move</span></span>';

	echo '<p>';
	echo 'Fieldset Title<br>';
	echo '<input type="text" name="fieldset[{{row-count-placeholder}}][title]" class="form-control" />';
	echo '</p>';
	
	echo '<p>';
	echo 'Fieldset Description<br>';
	echo '<input type="text" name="fieldset[{{row-count-placeholder}}][desc]" class="form-control" />';
	echo '</p>';
	
	echo '<div class="wrapper">';
	
	echo '<span class="add button button-secondary">Add Option</span>';
	
	echo '<ul class="container">';
	
		echo '<li class="template row">';
		
			echo '<span class="move">Move</span>';

			echo '<p>';
			echo 'Option Title<br>';
			echo '<input type="text" name="fieldset[{{row-count-placeholder}}][options][{{row-count-placeholder}}][title]" class="form-control" />';
			echo '</p>';
			
			//... more fields ...
			
			echo '<span class="remove">Remove Option</span>';
			
		echo '</li>';
	
	echo '</ul>';
	
	echo '</div>';
	
	echo '<span class="remove">Remove Fieldset</span>';

echo '</li>';

echo '</ul>';
echo '</div>';
echo '</div>';

My JS:

$('.repeat').each(function() {
	$(this).repeatable_fields({
		wrapper: '.wrapper',
		container: 'ul',
	});
});