/*

    Taken from:
    http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/

*/

function addElement() {
  var ni = document.getElementById('myDiv');
  var numi = document.getElementById('theValue');
  var num = (document.getElementById('theValue').value -1)+ 2;
  if (num > 15) return false;
  numi.value = num;
  var newdiv = document.createElement('span');
  var divIdName = 'my'+num+'Div';
  newdiv.setAttribute('id',divIdName);
  //newdiv.innerHTML = 'Element Number '+num+' has been added! <a href=\'#\' onclick=\'removeElement('+divIdName+')\'>Remove the div "'+divIdName+'"</a>';
  newdiv.innerHTML = '<select size=\"1\" name=\"a'+num+'\"><option value=\"1\">noun</option><option value=\"2\">verb</option><option value=\"3\">adjective</option></select>';  
  ni.appendChild(newdiv);
}

function addElement2() {
  var ni = document.getElementById('myDiv');
  var numi = document.getElementById('theValue');
  var num = (document.getElementById('theValue').value -1)+ 2;
  if (num > 15) return false;
  numi.value = num;
  var newdiv = document.createElement('span');
  var divIdName = 'my'+num+'Div';
  newdiv.setAttribute('id',divIdName);
  //newdiv.innerHTML = 'Element Number '+num+' has been added! <a href=\'#\' onclick=\'removeElement('+divIdName+')\'>Remove the div "'+divIdName+'"</a>';
  newdiv.innerHTML = '<input type=\"text\" size=\"12\" name=\"a'+num+'\" />';  
  ni.appendChild(newdiv);
}

function removeElement(divNum) {
  var d = document.getElementById('myDiv');
  var olddiv = document.getElementById(divNum);
  d.removeChild(olddiv);
}