How do I add data-sly-list functionality inside a javascript function?

I'm writing a script that I'd like the author to be able to add new lines to the script as they add new elements to the page. The problem is I only know how to use the data-sly-list option in html in a <sly> tag. Here is an example of my script so you get the idea of what I'm trying to accomplish. I'm afraid the solution is creating a complicated sling model. My front-end knowledge struggles with those. More simple the solution the better. Thanks.

<script>
        ui.validator(document.getElementById('${properties.formId @ context="scriptString"}'), {
            fields: {
                <sly data-sly-list.item="${list.validateItemsList @ context="scriptString"}">
                    ${properties.multiinputid @ context="scriptString"}: { errorMessage: '${properties.multierrmessage @ context="scriptString"}', errorLocation: '${properties.multierrlocation @ context="scriptString"}', pattern: '${properties.multipattern @ context="scriptString"}', required: ${properties.multirequired @ context="scriptString"} },
                </sly>
                ${properties.lastinputid @ context="scriptString"}: { errorMessage: '${properties.lasterrmessage @ context="scriptString"}', errorLocation: '${properties.lasterrlocation @ context="scriptString"}', pattern: '${properties.lastpattern @ context="scriptString"}', required: ${properties.lastrequired @ context="scriptString"} }
            }
        });
</script>