I just learned about .delegate today, and I know I can be used for what I want but I'm not sure how I would add it here. 

Each line when added needs to me able to use .autocomplete they all use the same data.

```
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">

$(function() {

$('#field1').val("");
$('#field2').val("");
$('#field3').val("");
$('#field4').val("");

$("#field1").autocomplete({
                source: "PRODUCT.ORDER.QUERY.php",
                minLength: 2,
                autoFocus: true,
                select: function(event, ui) {
                    $('#field1').val(ui.item.field1);
                    $('#field2').val(ui.item.field2);
                    $('#field3').val(ui.item.field3);
                    $('#field4').val(ui.item.field4);

                }
            });
     }); 

</script>

</head>
<body>
<button id="removeAll">Delete All</button>
<button id="addLine">New Line</button>
<hr>
<form action="<?php echo $PHP_SELF;?>" method="post" id="orderform">
<table width="90%" border="0" cellspacing="2" cellpadding="2">
  <tr>
    <td>FIELD 1</td>
    <td>FIELD 2</td>
    <td>FIELD 3</td>
    <td>FIELD 4</td>
    <td>QTY</td>
  </tr>
  </table> <hr>

<div id="orderForm">
<table class="orderLine" width="90%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><input name="field1" type="text" id="field1" size="15" tabindex="1"></td>
    <td><input name="field2" type="text" id="field2" size="15"></td>
    <td><input name="field3" type="text" id="field3" size="15"></td>
    <td><input name="field4" type="text" id="field4" size="15"></td>
    <td><input name="qty"    type="text" id="qty"    size="15" tabindex="2"></td>
    <td><button class="removeLine">Delete</button></td>
  </tr>
</table>
</div>
</form>
<!-- START OF THE JQUERY FUNCTION THAT ADDS THE NEW ORDER LINE -->

<script type="text/javascript">

$("#orderForm").delegate(".removeLine", "click", function () {
    $(this).closest('.orderLine').remove();
});

<!-- This removes all newLine table rows -->
     $("#removeAll").click(function () {
      $('.orderLine').remove();
    });

<!-- ADDS the 'newLine' table rows -->
    $("#addLine").click(function () {

    $('#orderForm').append('<table class="orderLine" width="90%" border="0" cellspacing="0" cellpadding="0"><tr><td><input name="field1" type="text" id="field1" size="15" tabindex="1"></td><td><input name="field2" type="text" id="field2" size="15"></td><td><input name="field3" type="text" id="field3" size="15"></td><td><input name="field4" type="text" id="field4" size="15"></td><td><input name="qty"    type="text" id="qty"    size="15" tabindex="2"></td><td><button class="removeLine">Delete</button></td></tr></table>');
    });

</script>
</body>
</html>

```

Working 1/2 wayish. Not I can use the .autocomplete again but its not right. I populates all the fields again.
--------------------------------------------------------------------------------------------------------------

```
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">

$(function() {

$('.field1').val("");
$('.field2').val("");
$('.field3').val("");
$('.field4').val("");

$("body").delegate(".field1:not(:ui-autocomplete)","focus",function(){
  $(this).autocomplete({
                source: "PRODUCT.ORDER.QUERY.php",
                minLength: 2,
                autoFocus: true,
                select: function(event, ui) {
                    $('.field1').val(ui.item.field1);
                    $('.field2').val(ui.item.field2);
                    $('.field3').val(ui.item.field3);
                    $('.field4').val(ui.item.field4);

                }
            });
     }); 
});
</script>

</head>
<body>
<button id="removeAll">Delete All</button>
<button id="addLine">New Line</button>
<hr>
<form action="<?php echo $PHP_SELF;?>" method="post" id="orderform">
<table width="90%" border="0" cellspacing="2" cellpadding="2">
  <tr>
    <td>FIELD 1</td>
    <td>FIELD 2</td>
    <td>FIELD 3</td>
    <td>FIELD 4</td>
    <td>QTY</td>
  </tr>
  </table> <hr>

<div id="orderForm">
<table class="orderLine" width="90%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><input class="field1" type="text" size="15" tabindex="1"></td>
    <td><input class="field2" type="text" size="15"></td>
    <td><input class="field3" type="text" size="15"></td>
    <td><input class="field4" type="text" size="15"></td>
    <td><input class="qty"    type="text" size="15" tabindex="2"></td>
    <td><button class="removeLine">Delete</button></td>
  </tr>
</table>
</div>
</form>
<!-- START OF THE JQUERY FUNCTION THAT ADDS THE NEW ORDER LINE -->

<script type="text/javascript">

$("#orderForm").delegate(".removeLine", "click", function () {
    $(this).closest('.orderLine').remove();
});

<!-- This removes all newLine table rows -->
     $("#removeAll").click(function () {
      $('.orderLine').remove();
    });

<!-- ADDS the 'newLine' table rows -->
    $("#addLine").click(function () {

    $('#orderForm').append('<table class="orderLine" width="90%" border="0" cellspacing="0" cellpadding="0"><tr><td><input class="field1" type="text" size="15" tabindex="1"></td><td><input class="field2" type="text" size="15"></td><td><input class="field3" type="text" size="15"></td><td><input class="field4" type="text" size="15"></td><td><input class="qty"    type="text" size="15" tabindex="2"></td><td><button class="removeLine">Delete</button></td></tr></table>');
    });

</script>
</body>
</html>

```

WORKING EXAMPLE!
----------------

```
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">

$(function() {

$('.field1').val("");
$('.field2').val("");
$('.field3').val("");
$('.field4').val("");

$("body").delegate(".field1:not(:ui-autocomplete)","focus",function(){
  $(this).autocomplete({
                source: "PRODUCT.ORDER.QUERY.php",
                minLength: 2,
                autoFocus: true,
                select: function(event, ui) {
                    $(this).closest('tr').find('.field1').val(ui.item.field1);
                    $(this).closest('tr').find('.field2').val(ui.item.field2);
                    $(this).closest('tr').find('.field3').val(ui.item.field3);
                    $(this).closest('tr').find('.field4').val(ui.item.field4);

                }
            });
     }); 
});
</script>

</head>
<body>
<button id="removeAll">Delete All</button>
<button id="addLine">New Line</button>
<hr>
<form action="<?php echo $PHP_SELF;?>" method="post" id="orderform">
<table width="90%" border="0" cellspacing="2" cellpadding="2">
  <tr>
    <td>FIELD 1</td>
    <td>FIELD 2</td>
    <td>FIELD 3</td>
    <td>FIELD 4</td>
    <td>QTY</td>
  </tr>
  </table> <hr>

<div id="orderForm">
<table class="orderLine" width="90%" border="0" cellspacing="0" cellpadding="0">
 <tr>
    <td><input class="field1" type="text" size="15" tabindex="1"></td>
    <td><input class="field2" type="text" size="15"></td>
    <td><input class="field3" type="text" size="15"></td>
    <td><input class="field4" type="text" size="15"></td>
    <td><input class="qty"    type="text" size="15" tabindex="2"></td>
    <td><button class="removeLine">Delete</button></td>
  </tr>
</table>
</div>
</form>
<!-- START OF THE JQUERY FUNCTION THAT ADDS THE NEW ORDER LINE -->

<script type="text/javascript">

$("#orderForm").delegate(".removeLine", "click", function () {
    $(this).closest('.orderLine').remove();
});

<!-- This removes all newLine table rows -->
     $("#removeAll").click(function () {
      $('.orderLine').remove();
    });

<!-- ADDS the 'newLine' table rows -->
    $("#addLine").click(function () {

    $('#orderForm').append('<table class="orderLine" width="90%" border="0" cellspacing="0" cellpadding="0"> <tr>    <td><input class="field1" type="text" size="15" tabindex="1"></td>    <td><input class="field2" type="text" size="15"></td>    <td><input class="field3" type="text" size="15"></td>    <td><input class="field4" type="text" size="15"></td>    <td><input class="qty"    type="text" size="15" tabindex="2"></td>    <td><button class="removeLine">Delete</button></td>  </tr></table>');
    });

</script>
</body>
</html>

```