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?