<div>
    Enter num of boys:
    <input type="text" id="numOfBoys" name="numOfBoys" value=""> <br />
    <a href="#" id="filldetails" onclick="addBoys()">Add</a><br/>
    <div id="boys">
    </div>
    <br/>
    </div>

function addPresidents(event){
               var number = document.getElementById("numOfBoys").value;
               var container = document.getElementById("boys");

               //cleaning the child nodes
               while (container.hasChildNodes()) {
                     container.removeChild(container.lastChild);
               }

               var i;
               for (i=1;i<=number;i++){                   container.appendChild(document.createTextNode("Boy " + (i) + ":"));
                     var input =document.createElement("input");
                     input.type = "text";
                     input.placeholder = "Ime prezime, od-do";
                     input.name = "boy" + i;
                     input.id = "boy" + i;
                     input.value = "";
                     container.appendChild(input);
               }
        }

function gatherPresidents(form,app){
  var data = "Boys: n";
  var number = form.numOfBoys;
  var i;
  for(i = 1; i <= number; i++){
    //data += app.getElementById("boy" + i); ->returns Generic
    var p = 'boy' + i;
    data += form.p;                   -> returns undefined
  }
  return data;
}
}