javascript/jquery loop works, but only in reverse

Question

I am writing a task checklist using javascript and jquery for my work. What happens is the page uses AJAX to fetch data from various tables and put them all together. That part works fine.

The problems start to arise when the program tries to append the data to the numbered DIVs. The function I have takes in two arrays, one for the ids of the divs I will be appending to, and one that's used to determine which data to fetch If I run the following loop as written, only the first div will be filled in, however, if I switch the "direction" of the loop by making it count down instead of up, it works perfectly.

I don't think I have ever seen such a case before, much less heard about one. My co-worker insists on figuring out the "proper" solution by having the loop run normally instead of in reverse. He believes there is some sort of problem with the way I have written my loop, but I've sat here for hours and I really do not see it.

function appendTasks(divs,clients)
{//Make the AJAX Request for Categories

var s=0;
while(s<divs.length)
{
    var div_id=divs[s];
 var client_id=clients[s];
 var parameters=new Array();
 parameters['action']='categories';
    var response = AJAXRequestExecute("check.php", true, false, parameters);
 //Make the AJAX request for tasks
 $("div#" + div_id).append(response.variable1);
 //Get tasks for each individual category
 for (var i = 1; i < 12; i++)
 {
  parameters['no']=i;
  parameters['client']=client_id;
  parameters['action']='tasks';
  response = AJAXRequestExecute("check.php", true, false, parameters);
        //Append if there's something there, otherwise, hide
  if(response.variable1!="")
  {
   $("div#"+div_id+" .tasks[id*="+i+"]").append("<ul>"+response.variable1+"</ul>");
   alert("div#"+div_id+" .tasks[id*="+i+"]");
  }
  else
  {
   $("div#"+div_id+" > h2").each(function(){
   if($(this).attr("name")==i)
   $(this).hide();});
  }
 }
 //Do the last one too
 if(response.variable1!="")
 {
  $("div#"+div_id+" > #" + i).append("<ul >"+response.variable1+"</ul>");
 }
    else
 {
  $("div#"+div_id+" > h2").each(function(){
  if($(this).attr("name")==i)
  $(this).hide();});
 }
//ADD ONE MORE
s=s+1;
} 

}`
// Reverse Version
function appendTasks(divs,clients)
{//Make the AJAX Request for Categories

var s=divs.length-1;
while(s>-1)
{
    var div_id=divs[s];
 var client_id=clients[s];
 var parameters=new Array();
 parameters['action']='categories';
    var response = AJAXRequestExecute("check.php", true, false, parameters);
 //Make the AJAX request for tasks
 $("div#" + div_id).append(response.variable1);
 //Get tasks for each individual category
 for (var i = 1; i < 12; i++)
 {
  parameters['no']=i;
  parameters['client']=client_id;
  parameters['action']='tasks';
  response = AJAXRequestExecute("check.php", true, false, parameters);
        //Append if there's something there, otherwise, hide
  if(response.variable1!="")
  {
   $("div#"+div_id+" .tasks[id*="+i+"]").append("<ul>"+response.variable1+"</ul>");
   alert("div#"+div_id+" .tasks[id*="+i+"]");
  }
  else
  {
   $("div#"+div_id+" > h2").each(function(){
   if($(this).attr("name")==i)
   $(this).hide();});
  }
 }
 //Do the last one too
 if(response.variable1!="")
 {
  $("div#"+div_id+" > #" + i).append("<ul >"+response.variable1+"</ul>");
 }
    else
 {
  $("div#"+div_id+" > h2").each(function(){
  if($(this).attr("name")==i)
  $(this).hide();});
 }
//sub ONE MORE
s=s-1;
} 

}`