keeping propriety of my first row to my new one

Question

I have a dynamic add button that appends a new row when pressed. My first row has an event: when I press enter it completes other input.

How can I add the same functionality for my dynamic one?

Here is what my original input looks like:

   <td>
          </br>
    <div id="numlundi">
        <input  onblur="autre();" onfocus="enter();" size="10" type="text" id="projlundi" name="projlundi"onkeypress="return handleEnter2(event, this, 'task');"/>
    </div>
</td>
<td>
    </br>
    <div id="clientlun"> 
        <input type="text" name="clientlundi" class = "client" size="12" id ="clientlundi" readonly />
    </div>
</td>
<td>
    </br>
    <div id="prodesclun">
        <input type="text" name="projdesclundi" size="30" class "desc" id ="projdesclundi"readonly />
    </div>
</td>
<td>

When I type in projlundi like 07, it suggests things such as 07-0138, 07-0668.

If I choose 07-0138 and type enter, it will give me for clientlundi and projdeclundi the associated information from my database. And I want to do the same thing with my new row.

Here's my function :

//------------------COMPLETE CLIENT DESC LUNDI----------------------
                function handleEnter2(e, obj, field){
                    if (e.keyCode == 13 || e.which == 13){
                        if (window.XMLHttpRequest)
                          {// code for IE7+, Firefox, Chrome, Opera, Safari
                            xmlhttp=new XMLHttpRequest();
                          }
                        else
                          {// code for IE6, IE5
                            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                          }
                        xmlhttp.onreadystatechange=function()
                          {
                            if (xmlhttp.readyState==4 && xmlhttp.status==200)
                                {
                                    tempArrayInJS = JSON.parse(xmlhttp.responseText); 
                                    $("#clientlundi").val( tempArrayInJS[0]['cliName']);    
                                    $("#projdesclundi").val( tempArrayInJS[0]['proDescription']);

                                }
                          }
                        xmlhttp.open("GET","completeclient.php?q="+obj.value,true);
                        xmlhttp.send();

                    }
                    //Enter was pressed, handle it here

                    }

Here is how I made a new row dynamically:

var counterlundi= 0;
 var $newRow ; 
$(function(){
    $('#add_lundi').click(function(){
        counterlundi += 1;
        $('#numlundi').append(
        $newRow = $('<input id="numlundi' + counterlundi + '" name="numlundi[]' + '" type="text"  /> ')     

                )
                    $newRow.autocomplete(autocompOpt);
               $('#clientlun').append(
                    (    '<input id="clientlundi' + counterlundi + '" name="clientlundi[]' + '" type="text"  />')   

                )
                $('#prodesclun').append(
                    (    '<input id="prodesclun' + counterlundi + '" name="prodesclun[]' + '" type="text"  />')     
                    )
                $('#protachelun').append(
                    (    '<textarea id="protachelun' + counterlundi + '" name="protachelun[]' + '" type="text"  rows="1" cols="20" />')     
                    )
                $('#prolieudivlun').append(
                    (    '<input id="prolieudivlun' + counterlundi + '" name="prolieudivlun[]' + '" type="text"  />')   
                    )
                select = $('<select id="tachedivlun' + counterlundi + '" name="tachedivlun[]" type="text"  />');
                select.append($("#Selectlundi option").clone());
                $("#tachedivlun").append(select);

                $('#calculTempsdivlun').append(
                    (    '<input id="calculTempsdivlun' + counterlundi + '" name="calculTempsdivlun[]' + '" type="number" size="10" min="0" max="24" value="0" />')     
                    )   
    });
});




var autocompOpt = {
    source:'getautocomplete.php',
    minLength:1
}

Do you have any idea how I should do this? Thanks for suggestion!

Answer 1

here the solution

//function append mercredi
var countermercredi= 0;
 var $newRow ; 
$(function(){
    $('#add_mer').click(function(){
        countermercredi += 1;
            $newRow = $('<input id="nummer' + countermercredi + '" name="nummer[]' + '" type="text" onblur="autre();" onfocus="enter();"  /> ') ;   $('#nummer').append($newRow)

        $newRow.keypress (function (e) { return handledynmer(event, this, 'task');}) 


                    $newRow.autocomplete(autocompOpt);
               $('#clientmer').append(
                    (    '<input id="clientmer' + countermercredi + '" name="clientmer[]' + '" readonly type="text" onblur="autre();" onfocus="enter();" />')   

                )
                $('#prodescmer').append(
                    (    '<input id="prodescmer' + countermercredi + '" name="prodescmer[]' + '" readonly type="text" onblur="autre();" onfocus="enter();" />')     
                    )
                $('#protachemer').append(
                    (    '<textarea id="protachemer' + countermercredi + '" name="protachemer[]' + '"  type="text"  rows="1" cols="20" onblur="autre();" onfocus="enter();" />')    
                    )
                $('#prolieudivmmer').append(
                    (    '<input id="prolieudivmmer' + countermercredi + '" name="prolieudivmmer[]' + '" type="text" onblur="autre();" onfocus="enter();" />')  
                    )
                select = $('<select id="tachedivmer' + countermercredi + '" name="tachedivmer[]" type="text"  onblur="autre();" onfocus="enter();" />');
                select.append($("#Selectmercredi option").clone());
                $("#tachedivmer").append(select);

                $('#calculTempsdivmer').append(
                    (    '<input id="calculTempsdivmer' + countermercredi + '" name="calculTempsdivmer[]' + '" type="number" size="10" min="0" max="24" value="0" class="dynamic" onblur="autre();" onfocus="enter();"/>')  
                    )   
        //désactive champs précédent.
        if (countermercredi > 1 )
        {
            countermercredi = countermercredi - 1 ;
            document.getElementById('nummer'+countermercredi).readOnly = true;
            countermercredi = countermercredi + 1 ;
        }                   
    });
});

 //remove mercredi
$(function(){
    $('#remove_mercredi').click(function(){
    var calculTempsdivmer = document.getElementById("calculTempsdivmer"+countermercredi);
    var tachedivmer = document.getElementById("tachedivmer"+countermercredi);
    var prolieudivmmer = document.getElementById("prolieudivmmer"+countermercredi);
    var protachemer = document.getElementById("protachemer"+countermercredi);
    var prodescmer = document.getElementById("prodescmer"+countermercredi);
    var clientmer = document.getElementById("clientmer"+countermercredi);
    var nummer = document.getElementById("nummer"+countermercredi);

    nummer.remove();
    clientmer.remove();
    prodescmer.remove();
    protachemer.remove();
    calculTempsdivmer.remove();
    tachedivmer.remove();
    prolieudivmmer.remove();


    countermercredi = countermercredi - 1 ;
    document.getElementById('nummer'+countermercredi).readOnly = false;
        });
});