[jQuery] Add new elements to a page but can't access existing js

[andrew]

Hi

I'm pretty new to jquery and I've basically got a form which allows
you to add additional fields and take them away, I've got it adding
and removing any fields that are there when the page loads but any
that are added after that the controls don't do anything.

I've got each form element like the following:

<div class="rtn_item" id="{position()}">
     <input type="text" size="7" name="starttime[]" value=""/>
     <input type="text" size="70" name="time_desc[]" value=""/>
     <a class="addField" id="{position()}">+</a>
     <a class="removeField" id="{position()}">-</a>
</div>

Because I'm using xslt for rendering I'm using a position counter to
allow me to reference which fields has been selected.

The JS I've got for the controls is:

 $('.addField').click(function() {
        selrow = $(this).attr("id");
        $('#'+selrow).after("
                  <div class=\"rtn_item\" id=\""+insertcnt+"\"><input
type=\"text\" size=\"7\"  name=\"starttime[]\" value=\"\"/>
&nbsp;&nbsp;-&nbsp;&nbsp; <input type=\"text\" size=\"70\" name=
\"time_desc[]\" value=\"\"/> &nbsp;&nbsp; <a class=\"addField\" id=
\""+insertcnt+"\">+</a>&nbsp;  <a class=\"removeField\" id=
\""+insertcnt+"\">-</a></div>
         ");
        $('#'+insertcnt).slideDown('slow');
        insertcnt++;
    }
);

 $('.removeField').click(function() {
        selField = $(this).attr("id");
        $("#"+selField).slideUp('slow').remove();
     }
 );

insertcnt is just a global variable to create a unique id for each
field

So I can add new fields but the controls on the new fields don't work,
any help with this would be very much appreciated.

Thanks