Suggestions not showing inside Table Row

[utsavDave97]

Describe the bug Suggestions not showing inside Table Row

As you can see in the below screenshot whenever I click on Add Dependents it would dynamically add a table row as shown in the screenshot. Inside the screenshot you can also see that when I type A the console does output 4 suggestions but it is not being displayed or rendered in the browser.

Moreover when the user taps Add Dependents this is the code which gets called.

var i = 0;
$("#add-dependent-button").click(function (e) {
    document.getElementById("dependentTable").style.display="block";
    ++i;
    $("#dynamicAddRemove").append('<tr><td><input class="typeahead2 form-control" type="text" name="dependents[' + i +
        '][client_id]" placeholder="Start typing name..." required"/></td><td><select class="form-control" id="relationship" name="dependents['+i+'][relationship]">@foreach($relationships as $relationship)<option value="{{$relationship->id}}">{{$relationship->relation}}</option>@endforeach</select></td><td><button type="button" class="btn btn-outline-danger remove-input-field">Remove</button></td></tr>'
    );
    $('input.typeahead2').typeahead({
        source:  function (query, process) {
            console.log(`${query}`);
            return $.get(path, { query: query }, function (data) {
                console.log(`${data}`);
                return process(data);
            });
        }
    });
    e.preventDefault();
});

I am using bootstrap and Laravel.

Appreciate your help!