Exported Html script from multiple component returns same variable names like props, ids, els

[ebalajier]

Hi @artf , thanks in advance.

I am creating different custom components with each having its own script which gets exported along with component HTML.
The problem I am facing is the export creates same variable name (props, ids, els) for each component type. Below is the example, is there any option to avoid duplicate name for variables in exported script?

<script>
    var props = { "i4s5": { "property": 1 }};
    var ids = Object.keys(props).map(function (id) { return '#' + id }).join(',');
    var els = document.querySelectorAll(ids);
    for (var i = 0, len = els.length; i < len; i++) {
        var el = els[i];
        (function exportScript(props) {
            console.log(props);
        }.bind(el))(props[el.id]);
    }

    var props = { "ita2": { "property": 2 }};
    var ids = Object.keys(props).map(function (id) { return '#' + id }).join(',');
    var els = document.querySelectorAll(ids);
    for (var i = 0, len = els.length; i < len; i++) {
        var el = els[i];
        (function script(props) {
            console.log(props);
        }.bind(el))(props[el.id]);
    }</script>

Thanks,
Balaji