Using Javascript to order and display user generated information

Before you read, I have attached a quick sketch which might make it easier to understand!

I have a project designed to familiarise new team members with their workplace compliance. Here's a simple explanation:

They have 4 compliance statements, each with a True/False variable. They toggle some true and some false on the first slide.

On the second slide, they will be given actions and information only for the corresponding variable and statements they have set to 'False'. It's designed to be a job aid, so if they mark themselves false on any of the compliance statements it will give them a to-do list to print out and action.

It's easy enough for Storyline to show the correct actions or advice on Slide 2 by using hidden and normal states. 

However, using this method creates a rather ugly output. If the learner has toggled some statements to 'True" then the corresponding actions aren't shown and leave ugly gaps on the screen.

What I would like:
Once the learner has toggled the True/False buttons and the second slide loads, I want it to list the actions with consistent spacing, so no gaps for the statements the learner marked as already 'true'

What I've tried
I've played with some JS but without success. ChatGPT has been helpful before and seems to suggest that using the ElementID for each text box or rectangle that houses the desired Actions can help us change the y value and spacing on the final slide, but no luck yet! Here is what it suggested:

// Get a reference to the rectangles
var rect1 = document.getElementById("Rectangle1");
var rect2 = document.getElementById("Rectangle2");
var rect3 = document.getElementById("Rectangle3");

// Check the state of each rectangle and position the ones with "Normal" state
var y = 200; // Starting y position
var spacing = 20; // Spacing between rectangles
if (rect1.getAttribute("state") === "Normal") {
    rect1.style.top = y + "50px";
    y += rect1.offsetHeight + spacing;
}
if (rect2.getAttribute("state") === "Normal") {
    rect2.style.top = y + "50px";
    y += rect2.offsetHeight + spacing;
}
if (rect3.getAttribute("state") === "Normal") {
    rect3.style.top = y + "50px";
    y += rect3.offsetHeight + spacing;
}

Any other ways that I could create a user generated list of actions based on T/F statements, and list them neatly and consistently?

thanks in advance!