The below code has auto complete being used in a pageblocktable. I can make the auto complete work outside of the pageblocktable, but not inside the table. What changes do I need to make in my code?

VFpage

<apex:page Controller="AddmultipleCPLIController">
    <!--Make sure you have the Javascript in the same order that I have listed below.-->
    <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="/soap/ajax/26.0/connection.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css"/>
    <script type="text/javascript">
        var j$ = jQuery.noConflict();
        var apexAccountList =[];
         
        //use the <!-- <apex:repeat > -->tag to iterate through the list returned from the class and store only the names in the javascript variable.
        <apex:repeat value="{!CustomerProductName}" var="accList">
            //Store the name of the account in the array variable.
            apexAccountList.push('{!accList.name}');
        </apex:repeat>
         
        //We will establish a connection salesforce database using the sforce.connection.init(sessionID, ServerURL) function.
        var sid = '{!$Api.Session_ID}';
        var server = "https://" + window.location.host + "/services/Soap/u/26.0";
        sforce.connection.init(sid, server);
         
        //We will query the contact object using the sforce.connection.query function. This will return 200 results.
        var result = sforce.connection.query("select Name from Customer_Product__c");
        var records = result.getArray("records");
    
       //on Document ready
        j$(document).ready(function(){
             
            j$("#NameAC").autocomplete({
                source : apexAccountList
            });

        });
    </script>
<apex:form > 

    <apex:pageBlock >
        <apex:pageBlockButtons >
            <apex:commandButton value="Add Customer Product Row" action="{!addCPLI}"/>
            <apex:commandButton value="Save Customer Product" action="{!saveCPLI}"/>
        </apex:pageBlockButtons>

    <apex:pageblockTable value="{!listcpli}" var="cpli" id="pbt">
        <apex:column headerValue="Customer Product Name">
            <apex:inputField value="{!cpli.name}" id="NameAC" required="true"/>
        </apex:column>

    </apex:pageblockTable>
 

    </apex:pageBlock>
</apex:form>
</apex:page>

Below is the class:

public class AddmultipleCPLIController {

    public list<Customer_Product__c> getCustomerProductName() {
        return [select id,name from Customer_Product__c limit 25];
    }


    Customer_Product_Line_Item__c cpli = new Customer_Product_Line_Item__c();
    public list<Customer_Product_Line_Item__c> listcpli{ get; set; }

    public AddmultipleCPLIController()
        {
            listcpli=new list<Customer_Product_Line_Item__c>();
            listcpli.add(cpli);
        }

    Public void addCPLI()
        {
            Customer_Product_Line_Item__c acc = new Customer_Product_Line_Item__c();
            listcpli.add(acc);
        }

    public PageReference saveCPLI() {
       for(Integer i=0; i<listcpli.size(); i++)
        {
        insert listcpli;
            }
        return null;
    }

}