استفاده از Tagify در Form-Repeater

دوستان عزیز سلام و خداقوت .
من توی یک صفحه فرم گسترش یابنده دارم ، یعنی کاربر بسته به نیاز خودش می تونه فیلدهایی رو به فرم ارسالی اضافه کنه [توی بخش اضافه کردن فیلدها از کتابخونه BootStrap Form-Repeater استفاده کردم ] . حالا توی دیزاین این فرم های تکرارشونده هم برای یکی از فیلدهاش از کتابخونه Tagify استفاده کردم .
حالا مشکل من اینجاست که توی حالت پیشفرض که یک عدد فرم وجود داره ، کتابخونه Tagify به درستی روی اون فیلدی که می خوام کار می کنه ، اما زمانیکه دکمه افزودن رو میزنم و فیلدی به فرمم افزوده می شه ؛ توی این فرم جدید کتابخونه Tagify روی اون فیلدی که باید کار نمیکنه و یجورایی کلا اون input مربوط به Tagify کلا کار نمیکنه .
اینم قطعه کد init کردن Tagify :

/**
 * Tagify
 */

"use strict";

(function () {
  // Custom list & inline suggestion
  //--------------------------------
  let TagifyCustomListSuggestionEl = document.querySelectorAll('input[name="form_repeater_categories[]"]');

  const whitelist = [];

  // List
  TagifyCustomListSuggestionEl.forEach((e) => {
    console.log("yes");
    new Tagify(e, {
      whitelist: whitelist,
      maxTags: 13,
      dropdown: {
        maxItems: 20,
        classname: "",
        enabled: 0,
        closeOnSelect: false,
      },
    });
  });
})();

اینم قطعه کد init کردن BootStrap Form-Repeater :

// bootstrap-maxlength & repeater (jquery)
$(function() {
    var formRepeater = $('.form-repeater');

    // Form Repeater
    // ! Using jQuery each loop to add dynamic id and class for inputs. You may need to improve it based on form fields.
    // -----------------------------------------------------------------------------------------------------------------

    if (formRepeater.length) {
        var row = 2;
        var col = 1;
        formRepeater.on('submit', function(e) {
            e.preventDefault();
        });
        formRepeater.repeater({
            show: function() {
                var fromControl = $(this).find('.form-control, .form-select');
                var formLabel = $(this).find('.form-label');

                fromControl.each(function(i) {
                    var id = 'form-repeater-' + row + '-' + col;

                    $(fromControl[i]).attr('id', id);
                    $(formLabel[i]).attr('for', id);

                    col++;
                });

                row++;

                $(this).slideDown();
            },
            hide: function(e) {
                confirm('Are you sure to delete this form?') && $(this).slideUp(e);
            }
        });
    }
});

اینم از قطعه کد HTML :

<div class="form-repeater">
   <div data-repeater-list="Partitions-Group">
      <div data-repeater-item>
         <div class="row">
            <div class="mb-3 col-lg-6 col-xl-3 col-12 mb-0">
               <label class="form-label" for="form-repeater-1-1">PartNumber:<small class="text-danger">*</small></label>
               <input type="number" name="form_repeater_partnum" id="form-repeater-1-1" class="form-control text-start" dir="rtl" placeholder="1">
            </div>
            <div class="mb-3 col-lg-6 col-xl-3 col-12 mb-0">
               <label class="form-label" for="form-repeater-1-2">Details:<small class="text-danger">*</small></label>
               <input type="number" name="form_repeater_partcellnum" id="form-repeater-1-2" class="form-control text-start" dir="rtl" placeholder="10">
            </div>

            <!-- Custom Suggestions: List -->
            <div class="mb-3 col-lg-12 col-xl-10 col-12 mb-0">
               <label for="form-repeater-1-3" class="form-label">Categories:<small class="text-danger">*</small></label>
               <input name="form_repeater_categories" id="form-repeater-1-3" class="form-control form_repeater_categories" dir="rtl" placeholder="SelectCategories..." value="">
            </div>

            <div class="mb-3 col-lg-12 col-xl-2 col-12 d-flex align-items-center mb-0">
               <span class="btn btn-label-danger mt-4" data-repeater-delete>
                  <i class="bx bx-x"></i>
                  <span class="align-middle">Delete</span>
               </span>
            </div>
         </div>
      </div>
   </div>
   <div class="mb-0">
      <span class="btn btn-primary" data-repeater-create>
         <i class="bx bx-plus"></i>
         <span class="align-middle">Add Form</span>
      </span>
   </div>
</div>