I have a page that needs to create dynamic form fields as often as the user needs, and I am trying to use Ajax to tie it in to my database for faster form entry and to prevent user typos.

So, I have put my Ajax returned data into popup div, the user selects, then the form field is filled in. The problem comes on the cloned fields. They don't seem to want to bring up the popup div when focused. I am thinking it is something to do with when they get created/added to the DOM.

Here is my JS that creates the clones:

$(document).ready(function() {
    var regex = /^(.*)(\d)+$/i;
    var cloneIndex = $(".clonedInput").length;

    $("button.clone").live("click", function(){
        $(this).parents(".clonedInput").clone()
            .appendTo("#course_container")
            .attr("id", "clonedInput" +  cloneIndex)
            .find("*").each(function() {
                var id = this.id || "";
                var match = id.match(regex) || [];
                if (match.length == 3) {
                    this.id = match[1] + (cloneIndex);
                }
        });
        cloneIndex++;
        numClones=cloneIndex-1;
        //alert("numClones "+numClones);
    });

Here is where I expect to be able to get focus on the correct cloned field and call the popup. The baker_equiv0 id is original code, whereas baker_equiv1 is the first clone.

$('#baker_equiv0').focus(function() { \\ THIS CODE WORKS
$('.popup').fadeIn(500);
$('#results').empty();
// document.enter_data.baker_equiv1.value="test"; THIS LINE WORKS
//alert("numClones "+numClones);
                }); 

$('#baker_equiv1').focus(function() { // THIS DOESN'T EVER FIRE
alert("numClones "+numClones);
$('.popup').fadeIn(500);
$('#results').empty();
}); 

Here is the HTML with the form:

<label for="baker_equiv" class="">Baker Equivalent: <span class="requiredField">*</span></label>
<input type="text" class="cinputsa" name="baker_equiv[]" id="baker_equiv0" size="8" ONKEYUP="get_equiv(this.value);">

If I put this in the HTML code above, it works fine: onfocus="alert(this.id)"

I'd also be interested in how to adjust the JS code to work based on the id array created rather than having to copy code for each potential set of fields clones, i.e., baker_equiv[] rather than baker_equiv0, baker_equiv1, etc.

Thanks all!