I have sourced this brilliant javaScript to create form elements using innerHTML, but how do I grab these elements once the form is submitted? Ultimately I will be using PHP to throw the inputted text into mySQL.

Here is the code I am using if it helps... (special thanks to http://binnyva.blogspot.com/ for this code example).

 
<!--
//Add more fields dynamically.
function addField(area,field,limit) {
 if(!document.getElementById) return; //Prevent older browsers from getting any further.
 var field_area = document.getElementById(area);
 var all_inputs = field_area.getElementsByTagName("textarea"); //Get all the input fields in the given area.
 //Find the count of the last element of the list. It will be in the format '<field><number>'. If the 
 //  field given in the argument is 'friend_' the last id will be 'friend_4'.
 var last_item = all_inputs.length - 1;
 var last = all_inputs[last_item].id;
 var count = Number(last.split("_")[1]) + 1;
 
 //If the maximum number of elements have been reached, exit the function.
 //  If the given limit is lower than 0, infinite number of fields can be created.
 if(count > limit && limit > 0) return;
 
 if(document.createElement) { //W3C Dom method.
  var li = document.createElement("li");
  var textarea = document.createElement("textarea");
  textarea.id = field+count;
  textarea.name = field+count;
  textarea.cols = "60"; //Type of field - can be any valid input type like text,file,checkbox etc.
  textarea.rows = "2";
  li.appendChild(textarea);
  field_area.appendChild(li);
 } else { //Older Method
  field_area.innerHTML += "<li><textarea name='"+(field+count)+"' id='"+(field+count)+"' type='text' cols='60' rows='2' /></textarea></li>";
 }
}
//-->

 <form action="test.php" method="post">
<strong>Essential</strong><br />
<ol id="friends_area">
<li><textarea name="friend_1" id="friend_1"  cols="60" rows="2"></textarea></li>
<li><textarea  name="friend_2" id="friend_2"  cols="60" rows="2"></textarea></li>
<li><textarea  name="friend_3" id="friend_3"  cols="60" rows="2"></textarea></li>
<li><textarea  name="friend_4" id="friend_4"  cols="60" rows="2"></textarea></li>
<li><textarea  name="friend_5" id="friend_5"  cols="60" rows="2"></textarea></li>
</ol>
<input type="button" value="Add Friend Field" onclick="addField('friends_area','friend_',10);" />
<strong>Desireable</strong><br />
<ol id="enemies_area">
<li><input type="text" name="enemy_1" id="enemy_1" /></li>
<li><input type="text" name="enemy_2" id="enemy_2" /></li>
<li><input type="text" name="enemy_3" id="enemy_3" /></li>
<li><input type="text" name="enemy_4" id="enemy_4" /></li>
<li><input type="text" name="enemy_5" id="enemy_5" /></li>
</ol>
<input type="button" value="Add Friend Field" onclick="addField('enemies_area','enemy_',0);" />
</form>
 
    <input name="" type="submit" value="Submit">
 <!--Here I added a hidden input called "submitted" so that I can check
 if the form has been submitted (and must be handled) or not.-->
 <input type="hidden" name="submitted" value="TRUE" />
  </p>
</form>   
<?php $friend = $_REQUEST['friend_1']; 
echo "<p>$friend</p>";
?>

http://www.w3schools.com/PHP/php_mysql_insert.asp

Using the DOM methods appendChild or insertBefore is a more reliable way of inserting form elements.

Internet Explorer has "problems" when submitting form elements added using innerHTML

Thanks chrishirst, I guess I will look for a better solution.