How to add input field using jQuery and call Ajax into new input field

I am using a table with input fields. I use jQuery for adding new row/ input field, and then I want to call Ajax into new row/input field. But its not working. Because it's not filling up the condition of document.ready() function..

here is my html form:

<table>
  <thead>
    <tr>
      <th>Account Name:</th>
      <th>Branch:</th>
    </tr>
  </thead>
  <tr>
    <td>
      <div>
        <input type="text" name="ac_name" class="auto-search-ac">
      </div>
    </td>
    <td>
      <div>
        <input type="text" name="branch">
     </div>
    </td>
  </tr>
</table>

Script for add new row in the table ( It is working perfectly) :

<script>
  $(document).on("focus",'#table tr:last-child td:last-child',function() {
      //append the new row here.
      var table = $("#table");

      table.append('<tr>\
      <td style="width:250px;"><div> <input type="text" name="ac_name" class="auto-search-ac"></div>\
           </td>\
      <td><div><input type="text" name="branch"></div>\
      </td>\
     </tr>');
  });
</script>

Ajax call into new inserted input field:: (in first row - ajax is working nicely)

<script type="text/javascript">

$(".auto-search-ac").autocomplete({
    source: "/ca-list",
    minLength: 1,
    select: function( event, ui ) {
        $('.auto-search-ac').val(ui.item.value);
        $('#ca-id-val').val(ui.item.ca_id);
    }
});

</script>

Note That I am using all scripts and html in Modal. In First row, everything is OK.

after adding new row by jQuery then I can not call ajax. May it could be the issue of document.ready().

How may I call any script/ajax/jQuery after adding a new input field/row using jquery in html?

Use class selector as you do not have element having is as auto-search-ac. After appending element, find element having class as auto-search-ac from the appended tr and initialize autocomplete

Try this:

$(".auto-search-ac").autocomplete({
  source: "/ca-list",
  minLength: 1,
  select: function(event, ui) {
    alert(ui.item.value);
    alert(ui.item.ca_id);
  }
});


$(document).on("focus", '#table tr:last-child td:last-child', function() {
  var table = $("#table");
  var element = '<tr>\
        <td style="width:250px;"><div> <input type="text" name="ac_name" class="auto-search-ac"></div>\
         </td>\
        <td><div><input type="text" name="branch"></div>\
        </td>\
       </tr>';
  table.append(element);

  $("#table tr:last-child").find(".auto-search-ac").autocomplete({
    source: "/ca-list",
    minLength: 1,
    select: function(event, ui) {
      alert(ui.item.value);
      alert(ui.item.ca_id);
    }
  });
});

<table id='table'>
  <thead>
    <tr>
      <th>Account Name:</th>
      <th>Branch:</th>
    </tr>
  </thead>
  <tr>
    <td>
      <div>
        <input type="text" name="ac_name" class="auto-search-ac">
      </div>
    </td>
    <td>
      <div>
        <input type="text" name="branch">
      </div>
    </td>
</table>

Fiddle demo