Hey guys...!

Suppose I have this one,

<!-- mula contact person div -->

<div name="contact_person" class="round"> <table id="contactptable" width="590" border="0">

  <tr>

    <td colspan="2"> <input type="button" id="contactpadd" value="+" />Contact Person</td>

  </tr>

   <tr>

  <td><input type="button" name="contactpremove" value="-" /></td>

    <td>

       <select name="contactptitle" >

        <option>Mr.</option>

        <option>Ms.</option>

      </select>

      <input type="text" name="contactpname" size="65"  />    </td>

  </tr>

  <tr><td></td>

    <td>Mobile :<input type="text" name="mobile" /> 

        Email :<input type="text" name="email" size="40" /></td>

  </tr>

  <tr> <td> </td>

    <td>Designation : <input type="text" name="designation" size="50" /></td>

  </tr>

  <tr>  <td> </td>

    <td>Product Handling :<input type="text" name="producthandling" size="60" />      </td>

  </tr>

</table>

</div> <!--akhir contact person div--> 

Okay, that's the interface. And here is the my function to create new Row, its new Columns (the shape is quite similar with the interface (I marked 'em with Purple Color above);

function addNewContact(){

    var aContact;

    var aRow = $('<tr />');

    var bRow = $('<tr />');

    var cRow = $('<tr />');

    var dRow = $('<tr />');

    // first row start added

    var aCel = $('<td />').append($('<input />').attr(

    {

        type:"button",

        name:"contactpremove",

        value:"-"

    } ) );

    aRow.append(aCel);

    var tempSelect = $('<select />').attr(

    {

        name:"contactptitle"

    } );

    tempSelect.append($('<option />').html('Mr.'));

    tempSelect.append($('<option />').html('Mrs.'));

    aCel = $('<td />').append(tempSelect);

    aCel.append($('<input />').attr(

    {

        type:"text",

        name:"contactpname",

        size:"65"

    } ));

    

    aRow.append(aCel);

    // first row added finished

    // second row start added

    aCel = $('<td />');

    bRow.append(aCel);

    aCel = $('<td />').append('Mobile :').append( $('<input />').attr(

    {

        type:"text",

        name:"mobile"

    } ) );

    aCel.append('Email :').append( $('<input />').attr(

    {

        type:"text",

        name:"email",

        size:"40"

    } ) );

    bRow.append(aCel);

    // second row added ended

    // third row start

    aCel = $('<td />');

    cRow.append(aCel);

    aCel = $('<td />').append('Designation :').append( $('<input />').attr(

    {

        type:"text",

        name:"designation",

        size:"50"

    } ) );

    cRow.append(aCel);

    // third row ended

    // fourth row started

    aCel = $('<td />');

    dRow.append(aCel);

    aCel = $('<td />').append('Product Handling :').append( $('<input />').attr(

    {

        type:"text",

        name:"producthandling",

        size:"60"

    } ) );

    dRow.append(aCel);

    // fourth row ended

    aContact = $(aRow);

    aContact = $(aContact).after($(bRow));

    aContact = $(aContact).after($(cRow));

    aContact = $(aContact).after($(dRow));

    return aContact;

   

} 

So, how did I put the function in? Well, I tried to use this one;

Jquery:

  // the contactpadd button 

    $('# contactpadd').live("click", function(){

        $('#contactptable tr:last').after(addNewContact);

    } ); 

But that one... just could one of the row instead of all rows....

Is there anyone that could work around for this matter? 

Correct me If I' am wrong....