материализовать css инициализировать чипы с данными из базы данных

Question

Я пытаюсь добавить данные микросхем в поле ввода chips из базы данных, поле ввода chips находится внутри modal, которое открывается на eventClick с fullCalendar

Элементом metaTags получить его значение один раз eventClick на fullCalendar:

    eventClick:function(info, modal, trigger, start){
      $('#ModalEdit #metaTags').val(info.event.extendedProps.employee);
      $('#ModalEdit').modal('open');
},

Моя проблема в том, что мне удается набрать sh val до metaTags, но я не могу перетащить его в data: с document.getElementById('metaTags').value; Я думаю, это потому, что он работает на document.ready, когда в метатегах еще нет значения.

Когда я делаю это вручную (<input id="metaTags" value="name1,name2">, он работает правильно.

$(document).ready(function(){
$('.chips-editevent').chips({
  placeholder: 'Add empl:',
  secondaryPlaceholder: '+Empl',
  onChipAdd: (event, chip, modal) => {
           var chipsData = M.Chips.getInstance($('.chips-editevent')).chipsData;
           var chipsDataJson = JSON.stringify(chipsData);
          //$(modal).find('input[name="userEventData"]').val(chipsDataJson);
          $('#ModalEdit #userEventData').val(chipsDataJson);
       },
       data:function(){
               var tagsMeta = [];
                   //alert(tagsMeta);
                   var tagsString = document.getElementById('metaTags').value;
                   //alert(tagsString);
                   var tagsArray = tagsString.split(',');
                   for(i=0; i < tagsArray.length; i++) {
                     tagsMeta.push({tag: tagsArray[i]});
                   }
                   tagsMeta
             },
       onChipSelect: () => {

       },
       onChipDelete: () => {
           var chipsData = M.Chips.getInstance($('.chips-editevent')).chipsData;
           var chipsDataJson = JSON.stringify(chipsData);
           $("#userEventData").val(chipsDataJson);
       }
  }
);