Как jquery UI автозаполнения для элемента, созданного после того, как документ готов?

Question

У меня есть одно основное поле ввода поиска, и оно записано в индексе. php:

<div class="row ">
    <input class="col-10 col-md-10 form-control form-control-sm w-8"
        type="text" name="tag_search" id="tag-search" value="" placeholder="Search..." >
    <button class="col-2 col-md-2 btn btn-search" type="button" onclick="searchFunc()" ><i class="fa fa-search"></i></button>
    <div id="suggestions"></div>
</div>

, и автозаполнение работает для него, но у меня есть еще один вход, который создается позже, когда изображение отображается и он предлагает добавить тег к нему, и они оба имеют одну и ту же функцию автозаполнения (с разными идентификаторами), но она не работает для более поздней версии. Я подозреваю, потому что он создается динамически.

$( function() {
    $( "#tag-search" ).autocomplete({
        appendTo: "#suggestions",
        source: function( request, response ) {
        $.ajax( {
          url: "/includes/autocomplete.php",
          dataType: "json",
          data: {
            term: request.term
          },
        success: function( data ) {
           response( data );
         }
       } );
    },
    minLength: 2,
    select: function( event, ui ) {
    }
  } );
} );

второй элемент:

 <input type="text" class="form-control"  id="add-tag-name" placeholder="Add Tag...">
<button type="button" class="btn btn-primary "
  title="Add Tag" id="plusbutton" onclick="addTagFunc()"><i class="fa fa-plus"></i>
</button>
<div id="tagsuggestions"></div>

вторая функция:

$( function() {
$( "#add-tag-name" ).autocomplete({
  appendTo: "#tagsuggestions",
  source: function( request, response ) {
    $.ajax( {
      url: "/includes/autocomplete.php",
      dataType: "json",
      data: {
        term: request.term
      },
      success: function( data ) {
        response( data );
      }
    } );
  },
  minLength: 2,
  select: function( event, ui ) {
  }
} );
} );