Seeking Clarification on Parent Objects and Structure in Captivate Classic for JS Manipulation

Hello,

My team is developing a custom Click-to-Drop interaction in Adobe Captivate Classic. We are using JavaScript to handle the logic, but we’ve run into a structural hurdle regarding how objects are rendered in the published HTML5 output.

Our working understanding is that objects (like text and shapes) are rendered as "sister" objects. More specifically, we've found that for a single interactive element, the visible layer and the clickable layer appear to be separated with no distinct parent object linking them.

This makes it difficult to move an object via JavaScript, as moving the visible element doesn't seem to move the "clickability" along with it. We feel like we are missing a fundamental piece of the hierarchy.

Here is a simplified snippet of how we are currently identifying these elements:

JavaScript:

// We can locate the visible 'reWrap', but the interactive layer seems separate
items.forEach(item => {
    item.visibleLayer = document.getElementById(item.textId); // Visible text
    item.container = document.getElementById(item.reWrapId);  // The wrapper

    // We cannot find a parent object that contains both the 
    // graphics and the interactive 'hit area'.
    if(item.container) {
        item.parent = item.container.parentElement; 
    }
});

Is this structure the only option to work with? Is there a workaround (such as  possibly using Groups or specific Library settings) that forces these objects into a parent wrapper in the HTML5 output - if they aren’t already in one? 

Any insights into the object hierarchy would be a huge help to our team.