Order optional groups using a comma-delimited list. Caution! Installing this script and not providing the list of group names will disable all optional groups in the page.

ordered_optional_groups.html

<?
// SalsaScript to retrieve the groups for an organization. The
// `groups` object can be used in your page using a SalsaScript insert variable.

function groupsReducer(a, g) {
    a[g.Group_Name] = {
        groups_KEY: g.groups_KEY,
        Description: g.Description,
        Group_Name: g.Group_Name
    };
    return a;
}
var groups = DB.getObjects('groups').reduce(groupsReducer, {} );
?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hogan.js/3.0.2/hogan.min.js" type="text/javascript"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
    var groupsDiv = document.querySelector('ul.salsa-optional-groups');
    if (groupsDiv != null) { 
        var groups = <?= groups.toJSON() ?>;
        var groupsData = document.querySelector('#order-groups-names')
            .innerHTML
            .split(',')
            .map(function(name) { console.log(name); return name; })
            .map(function(name) { return name.trim(); })
            .filter(function(name) { return groups.hasOwnProperty(name); })
            .map(function(name) { return groups[name]; });
        console.log('groupsData ' + JSON.stringify(groupsData));
        var template = Hogan.compile(document.querySelector('#order-groups-template').innerHTML);
        var html = template.render({data: groupsData });
        console.log ('HTML is ' + html);
        Array.from(groupsDiv.querySelectorAll('li'))
            .forEach(function(e) { e.parentNode.removeChild(e); })
        groupsDiv.innerHTML = html;
    }
});
</script>
<div id="order-groups-template" style="display: none;">
    {{#data}}
    <li class="salsa-optional-group">
        <input name="link" value="groups" type="hidden">
        <input id="add_to_groups_KEY{{groups_KEY}}_checkbox" value="{{groups_KEY}}" name="linkKey" type="checkbox">
        <label for="add_to_groups_KEY{{groups_KEY}}_checkbox">
            <span class="order-groups-name">{{Group_Name}}</span>
            <span class="order-groups-desc">{{Description}}</span>
        </label>
    </li>
    {{/data}}
</div>
<div id="order-groups-names" style="display: none;">
Everything, Vendors, Owners,Monthly Mule-O-Gram,Weekly Mule-O-Gram
</div>