In visualforce page I have a javascript for loop which calls a action function according to elements size

 
VF::

 <apex:form >
            <apex:actionFunction name="myActionFunction" action="{!actionFunctionMethod}"
                rerender="source,srcTable" oncomplete="">
            </apex:actionFunction>
    </apex:form>
<script>
       function addToList {
        for(var i=0; 1<ele.length; i++) {
            myActionFunction(); // This calls a method in contoller
        }
}
</script>

In controller I have a list initialised by its constructor and I add values by actionFunction as:

public with sharing class Details
{
  List<WrapperClass> detailsList {get; set;}

  public Details()
  {
     detailsList = new List<WrapperClass>();
  }

  public void actionFunctionMethod()
  {
    detailsList.add(new WrapperClass());
    System.debug('======  '+ detailsList.size()); // In system debug it is always 1
  }

  public class WrapperClass {

     public WrapperClass()
     {
     }
  }
}


Lets suppose the for loop execute myActionFunction 5 times. So, method actionFunctionMethod called 5 times and List must have size of 5. But it is always 1.

The Expected value for List should be 5 but actual coming value is 1. Context is same, page didn't reload but how this happening? and what should be work around it controller don't maintain values like this way?

I think some how list get initialised otherwise it will through null pointer exception. I have checked my code there is no initialisation except constructor.