UPDATE

So I have applied the recommended changes but I am now stuck with adding polyfill to make it work with IE11

In my head I have

<!-- Bootstrap -->
<link href="/assets/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="/assets/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="/assets/jquery/dist/jquery.js"></script>
<script src="/assets/jquery-ui/jquery-ui.js"></script>

<script src="/assets/fetch/fetch.js"></script>
<script src="/assets/es6-promise/dist/es6-promise.min.js"></script>

The JavaScript code

//To add to window
if (!window.Promise) {
  window.Promise = Promise;
}
const CommsMatrix = {
        getCMDStatuses: function(){
        return fetch('/api/user/list/comms/matrix/data/format/json'+'?csrf='+$.csrfParam('csrf')+'&select=distinct(status)&orderby=status', {
          // body: new URLSearchParams({ csrf: $.csrfParam('csrf'), select:
            // 'distinct(status)', orderby: 'status' })
            credentials: 'include'
        })
        .then(response => {
          return response.headers.error ? Promise.reject(response.headers.error) : response.json();
        }).then(body => {
          return body.body.recordset.record.map(v => v.STATUS)
        })
      },
      getSupportedProtocols: function(){
        return fetch('/api/user/list/sys/list/protocols/format/json'+'?csrf='+$.csrfParam('csrf')+'&orderby=name', {
          // body: new URLSearchParams({ csrf: $.csrfParam('csrf'), orderby:
            // 'name' })
            credentials: 'include'
        })
        .then(response => {
          return response.headers.error ? Promise.reject(response.headers.error) : response.json();
        }).then(body => {
          return body.body.recordset.record.map(v => v.NAME)
        })
      }
}

Promise.all([CommsMatrix.getCMDStatuses(), CommsMatrix.getSupportedProtocols()])
    // Destructuring the 2-item array into statuses and protocols variables
    .then(([ statuses, protocols ]) => {
        // You've got statuses and protocols loaded
        selectField = HTMLFormTag.createSelect(statuses, true, false, 'To implement');
        selectField.setAttribute("name", 'status['+counter+']');
        selectField = selectField.outerHTML;

        selectProtocolField = HTMLFormTag.createSelect(protocols, true, false, 'TCP');
        selectProtocolField.setAttribute("name", 'protocol['+counter+']');
        selectProtocolField = selectProtocolField.outerHTML;

        // Automatically add a first row of data
        $('#addRow').click();
    });

In IE11 it complains in 3 places. syntax error on .then(response => { and .then(([ statuses, protocols ]) => { and SCRIPT438: Object doesn't support property or method 'csrfParam'

UPDATE

So I have applied the recommended changes but I am now stuck with adding polyfill to make it work with IE11

In my head I have

<!-- Bootstrap -->
<link href="/assets/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="/assets/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="/assets/jquery/dist/jquery.js"></script>
<script src="/assets/jquery-ui/jquery-ui.js"></script>

<script src="/assets/fetch/fetch.js"></script>
<script src="/assets/es6-promise/dist/es6-promise.min.js"></script>

The JavaScript code

//To add to window
if (!window.Promise) {
  window.Promise = Promise;
}
const CommsMatrix = {
        getCMDStatuses: function(){
        return fetch('/api/user/list/comms/matrix/data/format/json'+'?csrf='+$.csrfParam('csrf')+'&select=distinct(status)&orderby=status', {
          // body: new URLSearchParams({ csrf: $.csrfParam('csrf'), select:
            // 'distinct(status)', orderby: 'status' })
            credentials: 'include'
        })
        .then(response => {
          return response.headers.error ? Promise.reject(response.headers.error) : response.json();
        }).then(body => {
          return body.body.recordset.record.map(v => v.STATUS)
        })
      },
      getSupportedProtocols: function(){
        return fetch('/api/user/list/sys/list/protocols/format/json'+'?csrf='+$.csrfParam('csrf')+'&orderby=name', {
          // body: new URLSearchParams({ csrf: $.csrfParam('csrf'), orderby:
            // 'name' })
            credentials: 'include'
        })
        .then(response => {
          return response.headers.error ? Promise.reject(response.headers.error) : response.json();
        }).then(body => {
          return body.body.recordset.record.map(v => v.NAME)
        })
      }
}

Promise.all([CommsMatrix.getCMDStatuses(), CommsMatrix.getSupportedProtocols()])
    // Destructuring the 2-item array into statuses and protocols variables
    .then(([ statuses, protocols ]) => {
        // You've got statuses and protocols loaded
        selectField = HTMLFormTag.createSelect(statuses, true, false, 'To implement');
        selectField.setAttribute("name", 'status['+counter+']');
        selectField = selectField.outerHTML;

        selectProtocolField = HTMLFormTag.createSelect(protocols, true, false, 'TCP');
        selectProtocolField.setAttribute("name", 'protocol['+counter+']');
        selectProtocolField = selectProtocolField.outerHTML;

        // Automatically add a first row of data
        $('#addRow').click();
    });

In IE11 it complains in 3 places. syntax error on .then(response => { and .then(([ statuses, protocols ]) => { and SCRIPT438: Object doesn't support property or method 'csrfParam'

I would like to know what is the best way of doing the following. I have created an object which makes use of ajax. It is dependent on the returned data to generate form tags etc. The data is a record which is turned into array for the value i need (NAME/STATUS).

    var HTMLFormTag = (function() {
    
    var selectList;
    
    var generateSelectHTML = function(data, keySameAsValue, addselectvalue, selectedValue){
        selectList = document.createElement("select");
        selectList.setAttribute("class", "form-control");
        
        if(addselectvalue){
            var option = document.createElement("option");
            option.setAttribute("value", '');
            option.text = '--select--';
            selectList.appendChild(option);
        }
        $.each(data, function( index, value ) {
            var selected = '';
            var option = document.createElement("option");
            if(selectedValue.length > 0){
                if(value == selectedValue){
                    selected = 'selected';
                    option.setAttribute("selected", selected);
                }else{
                    selected = '';
                }
            }
            
            if(keySameAsValue){
                option.setAttribute("value", value);
            }else{
                option.setAttribute("value", index);
            }
            option.text = value;
            selectList.appendChild(option);
        });
    }
    
    return {
        createSelect : function(data,keySameAsValue, addselectvalue, selectedValue){
            generateSelectHTML(data,keySameAsValue, addselectvalue, selectedValue);
            return selectList;
        }
    }
})();


var CommsMatrix = (function() {

    // declare private variables and/or functions
    var statuses = [];
    var loadData = [];
    var protocols = [];
    
    var generateCMDStatuses = function() {
        loadData.push($.get( "/api/user/list/comms/matrix/data/format/json", {csrf: $.csrfParam('csrf'), select: 'distinct(status)' ,orderby: 'status'}).done(function(data){
            if (data.header.error) {
            } else {
                $.each(data.body.recordset.record, function( index, value ) {
                    if(value.STATUS != "to implement"){
                        statuses.push(value.STATUS);
                    }
                });
                
            }
        }));
    }
    
    var generateProtocolList = function() {
        loadData.push($.get( "/api/user/list/sys/list/protocols/format/json", {csrf: $.csrfParam('csrf'), orderby: 'name'}).done(function(data){
            if (data.header.error) {
            } else {
                $.each(data.body.recordset.record, function( index, value ) {
                    protocols.push(value.NAME);
                });
                
            }
        }));
    }

    return {
        createCM: function(params) {
              createCommsMatrix(params);
            },
        genCMDStatuses: function() {
            generateCMDStatuses();
        },
        genProtocolList: function() {
            generateProtocolList();
        },
        getCMDStatuses: function() {
            return statuses;
        },
        getSupportedProtocols: function() {
            return protocols;
        },
        getLoadData : function(){
            return loadData;
        }
    }

})();

    $(function(){
    CommsMatrix.genCMDStatuses();
    CommsMatrix.genProtocolList();
    var loadData = CommsMatrix.getLoadData();
    var selectField = '';
    var selectProtocolField = '';

    t = $('table').DataTable( {
        "paging":   false,
        "ordering": false,
        "info":     false,
        "searching": false,
        }
    } );

    counter = 0;
    $('#addRow').on( 'click', function () {

        var inputSrcField = '<input size="15" name="src['+counter+']" class="form-control"/>';
        var inputDstField = '<input size="15" name="dst['+counter+']" class="form-control"/>';
        var nattype = ['source','destination'];
        var selectNatField = HTMLFormTag.createSelect(nattype, true, true, '');
        selectNatField.setAttribute("name", 'nat['+counter+']');
        selectNatField = selectNatField.outerHTML;

        var inputNatField = '<input size="15" name="nat['+counter+']" class="form-control"/>';

        var inputRemarksField = '<input name="remarks['+counter+']" class="form-control"/>';
        var textareaSrcPort = '<textarea name="srcport['+counter+']">any</textarea>';
        var textareaDstPort = '<textarea name="dstport['+counter+']">any</textarea>';

        t.row.add( [
            selectField,
            inputSrcField,
            '',
            textareaSrcPort,
            inputDstField,
            '',
            textareaDstPort,
            selectNatField,
            inputNatField,
            selectProtocolField,
            inputRemarksField,
        ] ).draw( false );

        counter++;

    } );


    $.when(loadData[0],loadData[1]).done(function(data){
        var statuses = CommsMatrix.getCMDStatuses();
        selectField = HTMLFormTag.createSelect(statuses, true, false, 'To implement');
        selectField.setAttribute("name", 'status['+counter+']');
        selectField = selectField.outerHTML;

        var protocols = CommsMatrix.getSupportedProtocols();
        selectProtocolField = HTMLFormTag.createSelect(protocols, true, false, 'TCP');
        selectProtocolField.setAttribute("name", 'protocol['+counter+']');
        selectProtocolField = selectProtocolField.outerHTML;

        $('#addRow').click();
    });
});

I would like to know what is the best way of doing the following. I have created an object which makes use of Ajax. It is dependent on the returned data to generate form tags etc. The data is a record which is turned into array for the value I need (NAME/STATUS).

var HTMLFormTag = (function() {
    
    var selectList;
    
    var generateSelectHTML = function(data, keySameAsValue, addselectvalue, selectedValue){
        selectList = document.createElement("select");
        selectList.setAttribute("class", "form-control");
        
        if(addselectvalue){
            var option = document.createElement("option");
            option.setAttribute("value", '');
            option.text = '--select--';
            selectList.appendChild(option);
        }
        $.each(data, function( index, value ) {
            var selected = '';
            var option = document.createElement("option");
            if(selectedValue.length > 0){
                if(value == selectedValue){
                    selected = 'selected';
                    option.setAttribute("selected", selected);
                }else{
                    selected = '';
                }
            }
            
            if(keySameAsValue){
                option.setAttribute("value", value);
            }else{
                option.setAttribute("value", index);
            }
            option.text = value;
            selectList.appendChild(option);
        });
    }
    
    return {
        createSelect : function(data,keySameAsValue, addselectvalue, selectedValue){
            generateSelectHTML(data,keySameAsValue, addselectvalue, selectedValue);
            return selectList;
        }
    }
})();


var CommsMatrix = (function() {

    // declare private variables and/or functions
    var statuses = [];
    var loadData = [];
    var protocols = [];
    
    var generateCMDStatuses = function() {
        loadData.push($.get( "/api/user/list/comms/matrix/data/format/json", {csrf: $.csrfParam('csrf'), select: 'distinct(status)' ,orderby: 'status'}).done(function(data){
            if (data.header.error) {
            } else {
                $.each(data.body.recordset.record, function( index, value ) {
                    if(value.STATUS != "to implement"){
                        statuses.push(value.STATUS);
                    }
                });
                
            }
        }));
    }
    
    var generateProtocolList = function() {
        loadData.push($.get( "/api/user/list/sys/list/protocols/format/json", {csrf: $.csrfParam('csrf'), orderby: 'name'}).done(function(data){
            if (data.header.error) {
            } else {
                $.each(data.body.recordset.record, function( index, value ) {
                    protocols.push(value.NAME);
                });
                
            }
        }));
    }

    return {
        createCM: function(params) {
              createCommsMatrix(params);
            },
        genCMDStatuses: function() {
            generateCMDStatuses();
        },
        genProtocolList: function() {
            generateProtocolList();
        },
        getCMDStatuses: function() {
            return statuses;
        },
        getSupportedProtocols: function() {
            return protocols;
        },
        getLoadData : function(){
            return loadData;
        }
    }

})();

$(function(){
    CommsMatrix.genCMDStatuses();
    CommsMatrix.genProtocolList();
    var loadData = CommsMatrix.getLoadData();
    var selectField = '';
    var selectProtocolField = '';

    t = $('table').DataTable( {
        "paging":   false,
        "ordering": false,
        "info":     false,
        "searching": false,
        }
    } );

    counter = 0;
    $('#addRow').on( 'click', function () {

        var inputSrcField = '<input size="15" name="src['+counter+']" class="form-control"/>';
        var inputDstField = '<input size="15" name="dst['+counter+']" class="form-control"/>';
        var nattype = ['source','destination'];
        var selectNatField = HTMLFormTag.createSelect(nattype, true, true, '');
        selectNatField.setAttribute("name", 'nat['+counter+']');
        selectNatField = selectNatField.outerHTML;

        var inputNatField = '<input size="15" name="nat['+counter+']" class="form-control"/>';

        var inputRemarksField = '<input name="remarks['+counter+']" class="form-control"/>';
        var textareaSrcPort = '<textarea name="srcport['+counter+']">any</textarea>';
        var textareaDstPort = '<textarea name="dstport['+counter+']">any</textarea>';

        t.row.add( [
            selectField,
            inputSrcField,
            '',
            textareaSrcPort,
            inputDstField,
            '',
            textareaDstPort,
            selectNatField,
            inputNatField,
            selectProtocolField,
            inputRemarksField,
        ] ).draw( false );

        counter++;

    } );


    $.when(loadData[0],loadData[1]).done(function(data){
        var statuses = CommsMatrix.getCMDStatuses();
        selectField = HTMLFormTag.createSelect(statuses, true, false, 'To implement');
        selectField.setAttribute("name", 'status['+counter+']');
        selectField = selectField.outerHTML;

        var protocols = CommsMatrix.getSupportedProtocols();
        selectProtocolField = HTMLFormTag.createSelect(protocols, true, false, 'TCP');
        selectProtocolField.setAttribute("name", 'protocol['+counter+']');
        selectProtocolField = selectProtocolField.outerHTML;

        $('#addRow').click();
    });
});