While it may appear that this question has been asked before, my specific inquiry seems to be unique as I have not found a similar answer in other threads. Therefore, I am initiating a new discussion.

My issue revolves around a form which contains a link that, when clicked, adds HTML content to a div within the form. Users have the ability to add this content multiple times. However, upon submitting the form, only the field added for the first time using JavaScript gets posted through the form. The subsequent data from the second and following forms is not submitted. I have included my code below and would greatly appreciate any assistance in identifying and resolving this issue.

<form action="<?php echo $this->getUrl('children/index/addChild') ?>" method="post" id="form-validate" autocomplete="off">

    <div class="fieldset">
        <?php //echo $this->getBlockHtml('formkey')?>
        <h2 class="legend"><?php echo $this->__('Child Name') ?></h2>
        <?php if(sizeof($model)==0): ?>



        <a href="javascript:show()" id="addchild">Add Child</a>

    <div id="child" style="display:none;">
        <li>
            <div class="field">
                    <label for="firstname" class="required"><em>*</em><?php echo $this->__('First Name') ?></label>
                    <div class="input-box">
                        <input type="text" name="firstname" id="firstname" value="<?php  ?>" title="<?php echo $this->__('First Name') ?>" class="input-text required-entry" />
                    </div>
            </div>
            <div class="field">
                    <label for="lastname" class="required"><em>*</em><?php echo $this->__('Last Name') ?></label>
                    <div class="input-box">
                        <input type="text" name="lastname" id="lastname" value="<?php  ?>" title="<?php echo $this->__('Last Name') ?>" class="input-text required-entry" />
                    </div>
            </div>        
        </li>
        <li>
            <div class="field">
                    <label for="schoolname" class="required"><em>*</em><?php echo $this->__('School Name') ?></label>
                    <div class="input-box">

                        <select id='schoolname' name='schoolname'>
                            <option value="0">Select School</option>
                            <?php foreach ($schools as $key => $school): ?>
                                <option value="<?php echo $school['school_id']; ?>"><?php echo $school['school_name'] ?></option>
                            <?php endforeach;?>


                        </select>
                    </div>
            </div>  
            <div class="field">
                    <label for="year" class="required"><em>*</em><?php echo $this->__('Year') ?></label>
                    <div class="input-box">
                        <input type="text" name="year" id="year" value="<?php  ?>" title="<?php echo $this->__('Year') ?>" class="input-text required-entry" />
                    </div>
            </div>
            <div class="field">
                    <label for="class"><?php echo $this->__('Class(if applicable)') ?></label>
                    <div class="input-box">
                        <input type="text" name="class" id="class" value="<?php  ?>" title="<?php echo $this->__('Class') ?>" class="input-text" />
                    </div>
            </div>
        </li>
        <button type="submit" title="<?php echo $this->__('Save') ?>" class="button"><span><span><?php echo $this->__('Save') ?></span></span></button>
    </div>
<?php else: ?>
<?php $i=1;
foreach ($model as $key => $value): ?>
    <div id="child">
        <?php 
        $arr = array(); 
        $id= $value['child_id']; 

        ?>
        <a href="javascript:remove('<?php echo $id; ?>')" id="removechild">Remove Child</a>
        <li>
            <input type="hidden" value="<?php echo $id; ?>" name="childid<?php echo $i ?>" />
            <div class="field">
                    <label for="firstname<?php echo $i ?>" class="required"><em>*</em><?php echo $this->__('First Name') ?></label>
                    <div class="input-box">
                        <input type="text" name="firstname<?php echo $i ?>" id="firstname<?php echo $i ?>" value="<?php echo $value["firstname"]; ?>" title="<?php echo $this->__("First Name") ?>" class="input-text required-entry" />
                    </div>
            </div>
            <!-- Additional Fields -->

        <button type="submit" title="<?php echo $this->__('Save') ?>" class="button"><span><span><?php echo $this->__('Save') ?></span></span></button>
<?php endif; ?>
</form>

and here is the accompanying script:

function duplicate(){

    var id=document.getElementById('test').value;

    var div = document.createElement('div');

    div.className = "row"+id;

    // Additional fields to be appended dynamically

     document.getElementById('addition').appendChild(div);
     document.getElementById('test').value= ++id;

}

If you can provide any insight or suggestions on how to address this issue, I would greatly appreciate it. Thank you!