HTML generated through js can't load flowbite attributes

Question

I am generating a bit of html element with flowbite using vanilla javascript. I am doing it in a laravel project and we are using tailwind/flowbite css for it, but I think it do not affect elements that are generated after the page loaded. Here is my code:

function updateSectionsTable(gradeLevel) {
  $(sectionsTableBody).empty();

  $.each(sectionList, function (index, entry) {
                        /////////<tr class="bg-white dark:bg-gray-800 hover:bg-green-500 dark:hover:bg-gray-600
    const rowHTML = `<tr class="bg-white dark:bg-gray-800">
      <td class="px-6 py-4">
        ${index+1}
      </td>
      <td class="px-6 py-4">
        ${entry['section_name']}
      </td>
      <td class="px-6 py-4">
        ${entry['grade_level_id']}
      </td>
      <td class="px-6 py-4">
        ${entry['section_slot']} / ${entry['section_slot']}
      </td>
      <td class="px-6 py-4">
        <a href="#" data-modal-target="viewSectionInfoModal" data-modal-show="viewSectionInfoModal" type="button" class="pr-2 font-medium text-emerald-600 dark:text-emerald-500 hover:underline">View Section Info</a>
        <a href="#" data-modal-target="editSectionModal" data-modal-show="editSectionModal" type="button" class="pr-2 font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
        <a href="#" data-modal-target="archiveSectionModal" data-modal-show="archiveSectionModal" type="button" class="pr-2 font-medium text-gray-400 dark:text-gray-500 hover:underline">Archive</a>
        <a href="#" data-modal-target="deleteSectionModal" data-modal-show="deleteSectionModal" type="button" class="pr-2 font-medium text-red-600 dark:text-red-500 hover:underline">Delete</a>
      </td>
    </tr>`;

    $(sectionsTableBody).append(rowHTML);
  });
}

the anchor tags only add # to the url and the modal is not toggled. Also, I tried including this:

import { initFlowbite } from 'flowbite'

and I placed this init when that function is called. but it messes up the whole document. // initialize components based on data attribute selectors initFlowbite();

Is there a way to generate that html in the function with the flowbite attributes working?