Input disappeared in multiple nested branches in a single page

[jekayode]

In a case where I have multiple nested branches on a single form, the later steps disappear.

For example, I have a color main branch with two dependent branches and another main branch for size, I noticed that the sizes main branch and all the child branch will not show.

<div class="step" data-state="color">
	<p>Which color do you like best?</p>
	<label for="colorPink"><input type="radio" name="color" value="pink" id="colorPink" />Pink</label>
	<label for="colorBlue"><input type="radio" name="color" value="blue" id="colorBlue" />Blue</label>
</div>

<div class="branch" id="pink">
	<div class="step" data-state="end">
		<p class="pink">Pink, it was love at first sight</p>
	</div>
</div>

<div class="branch" id="blue">
	<div class="step" data-state="end">
		<p class="blue">I'm blue da ba dee da ba die...</p>
	</div>
</div>

<!-- This code is not rendered -->
                    
<div class="step" data-state="size">
	<p>Which Size</p>
	<label for="sizeOne"><input type="radio" name="size" value="1" id="sizeOne" />1</label>
	<label for="sizeTwo"><input type="radio" name="size" value="2" id="sizeTwo" />2</label>
</div>

<div class="branch" id="1">
	<div class="step" data-state="end">
		<p class="pink">Size 1</p>
	</div>
</div>

<div class="branch" id="2">
	<div class="step" data-state="end">
		<p class="blue">Size 2</p>
	</div>
</div>

<!-- /This code is not rendered -->

<div class="step" id="end">
	<p>FIN.</p>
</div>

Is there a config setting that I need to change?

Thanks