JSFiddle - React, Tailwind, and code Playground

HTML

<div>
        Text Box 1
        <input type="text" id="txt1" />
        Text Box 2
        <input type="text" id="txt2" />
    </div>

JavaScript

$(document).ready(function() {

            var arraytxt1 = [{ id: 1, label: "aa" }, { id: 2, label: "bb" }, { id: 3, label: "bbbb" }, { id: 4, label: "abab" }, { id: 5, label: "cab"}];

            $("#txt1").autocomplete({
                source: arraytxt1,
                minLength: 1,
                select: function(event, ui) {
                    $("#txt2").val(ui.item.id);
                    // Corresponding Text Box 2 value to selected.
                }
            });

            var arraytxt2 = [{ id: 1, label: "aa1" }, { id: 2, label: "bb1" }, { id: 3, label: "bbbb1" }, { id: 4, label: "abab1" }, { id: 5, label: "cab1"}];

            $("#txt2").autocomplete({
                source: arraytxt2,
                minLength: 1,
                select: function(event, ui) {
                   // Corresponding Text Box 1 value to selected.
                }
            });

        });