Javascript add element to form function not working?

Bear with me—this might be a bit confusing!

I have a javascript that adds (or removes) a new textarea + hidden field (to denote incrementation) to a form when a button is pushed. Here's the code:

function addRowToTable()
{ 

  var tbl = document.getElementById('convention');
  var lastRow = tbl.rows.length;
  // if there's no header row in the table, then iteration = lastRow + 1
  var iteration = lastRow;
  var row = tbl.insertRow(lastRow);



  // right cell
  var cellRight = row.insertCell(0);

  var el = document.createElement('textarea');
  el.rows = '2';
  el.cols = '80';
  el.name = 'conventionSkill' + iteration;
  el.size = 40;

    var el2 = document.createElement('input');
      el2.value = iteration;
  el2.type = 'hidden';
  el2.name = 'conventioni';



  el.onkeypress = keyPressTest;
  cellRight.appendChild(el);
    cellRight.appendChild(el2);


}

function removeRowFromTable()
{
  var tbl = document.getElementById('convention');
  var lastRow = tbl.rows.length;
  if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}

This is appended to a form which is being presented through the following code:

//Convention




 echo "<form action='index.php?viewrubric=".$_GET['viewrubric']."&class=".$_GET['class']."' method='POST'>";
echo "<input type='hidden' name='rubricid' value='".$id."' />";
$sql2 = "select * from rubrics_convention where rubricid = '$id'";
$result2 = mysql_query($sql2) or die (mysql_error());

?>
<h3>Habit of Convention</h3>
<table>
<tr><td>
<label>Habit Description: </td></tr></label></table><textarea name='conventionDescription' rows='2' cols='80'><? echo $description; ?></textarea><br />

<table id="convention">
<tr><td><label>Skill Descriptions: </label>
</td></tr>

<?
while($row2=mysql_fetch_array($result2)) {
$convention_i++;
echo "<tr><td><textarea ".$readonly." name='convention_".$row2['id']."' rows='2' cols='80'>".$row2['skill']."</textarea></td></tr>";
}
echo "<input type='hidden' value=".$convention_i." name='conventioni' />";


echo "</table>";
echo '<input type="button" value="Add" onClick="addRowToTable();" />
<input type="button" value="Remove" onClick="removeRowFromTable();" />
';

Essentially, this is checking the database (rubrics_convention) for what has already been submitted. It populates the textareas with what's there. Now, I want it to be possible for a user to click the Add button and add a new textarea. The script right now does this, but when I submit, it doesn't even recognize convention_i's new value, or the new skill.

Processing the form:

if(isset($_POST['update'])) {
//Convention

echo $_POST['conventioni'];
}

Outputting 3, not 4, even after adding new form elements through javascript.

When I did "view selection source" in Firefox after clicking the "Add" button, here's the output:

  <input value="3" name="conventioni" type="hidden" />

  <table id="convention">
    <tbody>
      <tr>
        <td><label>Skill Descriptions:</label></td>
      </tr>

      <tr>
        <td>
        <textarea name="convention_1" rows="2" cols="80">
habit 1
</textarea></td>
      </tr>

      <tr>
        <td>
        <textarea name="convention_2" rows="2" cols="80">
habit 2
</textarea></td>
      </tr>

      <tr>
        <td>
        <textarea name="convention_3" rows="2" cols="80">
testest
</textarea></td>
      </tr>

      <tr>
        <td>
        <textarea name="conventionSkill4" cols="80" rows="2">
</textarea><input name="conventioni" value="4" type="hidden" /></td>
      </tr>
    </tbody>
  </table>


    <input value="Add" onclick="addRowToTable();" type="button" /> <input value="Remove"
    onclick="removeRowFromTable();" type="button" />

Based on this output, you can clearly see that it's seeing the new conventioni value (the initial was 3, the javascript inserted a new one with a value of 4). However, when submitting the form, it completely ignores that new value and looks at the 3 instead. It doesn't even recognize conventionSkill4 as being there.

Any ideas? Thanks!