How to add autocomplete to appending added input fields? The autocomplete does not work on the dynamically added input fields

  <tr>
    <td>
       <input type="text" class="form-control form-control-sm purchase_order_item" 
        name="purchase_order_item[]" >
       <div class="suggesstion-box"></div>
    </td>
    <td>
        <input type="number" class="form-control form-control-sm 
         name="purchase_order_item_quantity[]" id="purchase_order_item_quantity">
    </td>
    <td>
        <input type="text" class="form-control form-control-sm" name="purchase_order_item_rate[]" 
         id="purchase_order_item_rate">
    </td>
    <td>
        <input type="text" class="form-control form-control-sm" name="purchase_order_item_tax[]" 
         id="purchase_order_item_tax">
    </td>
    <td>  
        <input type="text" class="form-control form-control-sm" name="purchase_order_item_amount[]" 
        id="purchase_order_item_amount">
    </td>
    <td>
        <center><a href="javascript:void(0)" name="add" id="add" class="btn btn-outline-secondary 
         btn-sm add"><i class="fa fa-plus" aria-hidden="true"></i></a></center>
    </td>

The following script is to add fields and autocomplete.

1. Autocomplete does not work for added fields.

2. The suggestion box does not appear over the table rows rather it appears in the rows hence expanding the row height.

    function select_item(val) {
       $(".purchase_order_item").val(val);
       $(".suggesstion-box").hide();
   }
   
   $(document).ready(function(){
   
       var max = 5;
       var x = 1;
   
       var html = '<tr><td><input type="text" class="form-control form-control-sm purchase_order_item" name="purchase_order_item[]"><div class="suggestion-box"></div></td><td><input type="text" class="form-control form-control-sm" name="purchase_order_item_quantity[]"></td><td><input type="text" class="form-control form-control-sm" name="purchase_order_item_rate[]"></td><td><input type="text" class="form-control form-control-sm" name="purchase_order_item_tax[]"></td><td><input type="text" class="form-control form-control-sm" name="purchase_order_item_amount[]"></td><td><div class="text-center"><a href="javascript:void(0)" name="remove" id="remove" class="btn btn-outline-secondary btn-sm remove"><i class="fa fa-times" aria-hidden="true"></i></a></div></td></tr>';
   
       $("#add").click(function(){
           if (x <= max){            
               $("#table_field").append(html); 
               x++;
           }
       });
       $("#table_field").on('click','#remove',function(){
         $(this).closest('tr').remove(); 
         x--;
       });
   });
   </script>