Typehead JS is not working on multiple inputs with same classes

Question

The problem I'm facing is related with Invoicing system. There is one row exists by default but if there are more than one products then user can Add New Item which adds the new row with jQuery append function.

Invoicing system has few Inputs one of them is Item Name which autocomplete by Typehead JS.

Code of Predefined Row

<tbody id="TableBody">
  <tr>
    <td style="width: 220px">
      <input type="text" class="form-control Item" name="Item" id="Item" placeholder="Nombre del producto" required autocomplete="off">
    </td>
    <td>
      <input type="number" name="QTV" min="1" name="QTV" id="QTV" class="form-control text-right" placeholder="00" required>
    </td>
    <td>
      <input step="2" type="number" class="form-control text-right" min="1" id="Rate" placeholder="0.00" readonly>
    </td>
    <td>
      <input step="any" id="Disc" name="Disc" type="number" min="0" name="" class="form-control text-right" placeholder="00">
    </td>
    <td>
      <input type="text" name="SubTotal" class="form-control text-right" id="Total" placeholder="Total" readonly>
    </td>
    <td>
      <button type="button" class="btn btn-danger DelRow">Delete</button>
    </td>
  </tr>
</tbody>

Code to Add new Row

$('#AddNewItem').click(function() { $('#TableBody').append(`
<tr>
  <td style='width: 220px'>
    <input type='text' class='form-control Item' name='Item' id='Item' placeholder='Nombre del producto' required autocomplete='off'>
  </td>
  <td>
    <input type='number' name='QTV' min='1' name='QTV' id='QTV' class='form-control text-right' placeholder='00' required>
  </td>
  <td>
    <input step='2' type='number' class='form-control text-right' min='1' id='Rate' placeholder='0.00' readonly>
  </td>
  <td>
    <input step='any' id='Disc' name='Disc' type='number' min='0' name='' class='form-control text-right' placeholder='00'>
  </td>
  <td>
    <input type='text' name='SubTotal' class='form-control text-right' id='Total' placeholder='Total' readonly>
  </td>
  <td>
    <button type="button" class="btn btn-danger DelRow">Delete</button>
  </td>
</tr>
`); });

Code to show Auto suggestions

$(document).ready(function() {
	$('.Item').typeahead({
		source:  function (query, process) {
		return $.get('FetchItem.php?Item', { query: query }, function (data) {				
				data = $.parseJSON(data);
				return process(data);
			});
		},
	});
});

I just wanted to show suggestions on all the additional appended fields. Any help would be much appreciated, Thank you

Screenshot

Answer 1

Afterall, I got the solution to my answer.

I was using jQuery document load function which was not working on the appended rows.

So instead of $(document).ready(function() { I just used $('.TableBody').on("click", ".Item", function() { and it worked.