Passing an array element from one js func to another

programming web dev
1

Hello hello please help.
Requirement
I am attempting to create some checkboxes dynamicaly based on selections via js. I have proven that the code works to create these elements using createElement etc.
My problem I am trying to drive these dynamic populations via a number of js scripts.

On my main page I call the first script via

$.getScript("js(2)/specialism/"+ "acc" +".js", function() {     process_array(field_area);   });

The acc.js contains a list of skills in an array which i try to process to create the rellevant HTML tags etc. Here is the code for acc.js;

function process_array(field_area)
{
myArray = new Array(    
"All                               ",      
"Audit                           ",
"Bookkeeping                     ",
"Business Services               ",
"Corporate Finance               ",
"Unit Trust Accounting           "
);

for ( i=0; i < myArray.length; i++ ) {
    skil = myArray*;
     $.getScript("js(2)/states/"+ "popul" +".js", function() { popul(field_area,skil); }); 
}

}

The actual element setting up looks like this and this works fine if I call the popul function one at a time for each element ie: not in the loop. BUT as soon as i use the loop i ONLY ever get the last element details showing on all the checkboxes . . .arrrrgggggg

function popul(field_area,field)
{    
var td = document.createElement("td");
var input = document.createElement("input");
var tdText=document.createTextNode(field);
td.width = "150px";
input.id = field;
input.name = field;
input.type = "checkbox";
td.appendChild(input);
td.appendChild(tdText);
field_area.appendChild(td);
}

I just cant work out why it produces the checkboxes number wise for all the elements ( ie the right number) BUT does not put the correct name against each one as per the names in the array. Its like it counts corrects but then only supplies the details of the last element. arrrrrrrrrrggghhhhhh please help