I would like to know what is the best way of doing the following. I have created an object which makes use of ajax. I am then dependent on this returned data to generate form tags.

var HTMLFormTag = (function() {
    
    var html = '';
    
    var generateSelectHTML = function(data, keySameAsValue){
        html = '<select class="form-control">';
        for (var i = 0; i < data.length; i++) {
            var selected = '';
            if(data[i] == "To implement"){
                selected = 'selected';
            }else{
                selected = '';
            }
            if(keySameAsValue){
                html += '<option value="'+data[i]+'" '+selected+'>'+data[i]+'</option>';
            }else{
                html += '<option value="'+i+'" '+selected+'>'+data[i]+'</option>';
            }
        }
        html += '</select>';
    }
    
    return {
        createSelect : function(data,keySameAsValue){
            generateSelectHTML(data,keySameAsValue);
            return html;
        }
    }
})();
var CommsMatrix = (function() {

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

    return {
      // declare public variables and/or functions
        createCM: function(params) {
              createCommsMatrix(params);
            },
        genCMDStatuses: function() {
            generateCMDStatuses();
        },
        getCMDStatuses: function() {
            return statuses;
        },
        getLoadData : function(){
            return loadData;
        }
    }

})();

In my main file to get the data I need:

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

    t = $('table').DataTable( {
        "paging":   false,
        "ordering": false,
        "info":     false,
        "searching": false,
        stateSave: true,
        "bStateSave": true,
        "fnStateSaveParams": function (oSettings, oData) {
          console.log(oSettings);
          console.log(oData);
        }
    } );

    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;

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

    $('form').submit(function(e){
        e.preventDefault();
        t.state.save();
        var formdata = $(this).serialize();
        formdata += "&csrf="+$.csrfParam('csrf') ;
        $.post('/api/admin/add/comms/matrices/format/json/',formdata, function( msg ) {
            console.log(msg);
        });
    });

});

Is this an efficient way to do this?