Setting states within other symbols or symbols layered within symbols

We are using Saola to create a software application simulation. Depending upon what action the user takes, the javascript code needs to run or set states within other symbols or symbols layered within symbols. The ids we are using to set element values (eg. via document.getElementById) we have to pull from inspecting the source html from the published page. This is an id that is automatically created by Saola, e.g. sl-elem-unit4_approver-1-3 at the point of publishing. This is almost impossible to use as we have to publish each time to get the ids to use in the code, which unfortunately changes on publishing as each time the layering of elements changes within the source file. It would be better if this was a static value that is displayed in the Properties panel.

Is there a way around this?
An example of a partial sequence:

Hi Mark,

I think you should try our another software called ActivePresenter, it’s more suitable for creating software simulations than Saola Animate.

If you still want to use Saola Animate, please use element name to get element object and element methods to get/set its properties, don’t use the HTML id attribute. For your example, please update the code as below: