data-lightbox ajax setAttribute not working in js.

I'm trying to create product listing as shown in shop-layout-4.html. However the "Quick View" button is not visible on hover and popup is not working. How can I fix this.
` var bgOverlay = document.createElement('div');
bgOverlay.classList.add('bg-overlay');
productImage.appendChild(bgOverlay);

  var bgOverlayContent = document.createElement('div');
  bgOverlayContent.classList.add('bg-overlay-content', 'align-items-end', 'justify-content-center', 'p-0');
  bgOverlay.appendChild(bgOverlayContent);

  var quickViewLink = document.createElement('a');
  quickViewLink.href = 'include/ajax/shop-item.html';
  quickViewLink.classList.add('btn', 'btn-light', 'py-2', 'w-100', 'm-0', 'rounded-0');
  quickViewLink.setAttribute('data-lightbox', 'ajax');
  quickViewLink.setAttribute('data-hover-animate', 'fadeInUp');
  quickViewLink.setAttribute('data-hover-animate-out', 'fadeOutDown');
  quickViewLink.setAttribute('data-hover-speed', '400');
  quickViewLink.setAttribute('data-hover-parent', '.product');
  quickViewLink.textContent = 'Quick View';
  bgOverlayContent.appendChild(quickViewLink);