JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<table id = "table1">
</table>

JavaScript

// добавляю в таблицу
document.getElementById(`table1`).insertAdjacentHTML(`beforeend`,
`<tbody>
	<tr>
		<td><input type="text"></td>
		<td><input type="text"></td>
		<td><input type="text"></td>
	</tr>
	<tr>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td><input type="text"></td>
	</tr>
</tbody>`);
// после работаем как работали.
document.querySelectorAll(`#table1 input`).forEach((el, i) => el.dataset.num = i);
document.getElementById(`table1`).addEventListener(`input`, e => {
  if (e.target.tagName === `INPUT`) console.log(`№${e.target.dataset.num}-${e.target.value}`);
});
$( document ).ready(function() {
  $('#table1 input').autocomplete({
    source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ],
    select: function(e, ui) { console.log(`№${e.target.dataset.num}-${ui.item.value}`);},
  });

});