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?