I have created a Pricing Page generator in React using shadcn and framer-motion. In this, There is an edit button and one can click on edit button and edit any text he want in the page, add more plans and features etc. Also there is an Export button to download html, css and javascript code in 3 separate files which can be added to website to display pricing. I can work with getting rendered html and css code from the the page but I could not find a solution for downloading javascript code.
I want to be able to javascript code too that it required for some functionalities like tooltips and switching between monthly and yearly pricing. I want only required javascript code without editing functionality.
You can see the live demo here
https://advanced-pricing-table.vercel.app/

You can see the Github respiratory here.
https://github.com/zahidlatifdev/advanced-pricing-table

Here is my Export Handler code. I haven’t added code for js download because I could figure out how to do it.

import React from 'react';

const exportPricingPage = () => {
    const htmlContent = generateHTML();
    const cssContent = generateCSS();

    downloadFile('pricing-page.html', htmlContent);
    downloadFile('pricing-page.css', cssContent);
};

const downloadFile = (filename, content) => {
    const element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(content));
    element.setAttribute('download', filename);
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
};

// Capture the current HTML code by getting the body content of the rendered page and removing unwanted buttons
const generateHTML = () => {
    const clonedDocument = document.documentElement.cloneNode(true); // Clone the entire document to manipulate it
    const exportSection = clonedDocument.querySelector('#export'); // Assuming #exportButton is the ID for the expor

    // Remove export and edit buttons if they exist
    if (exportSection) exportSection.remove();

    // Return the modified HTML content
    return clonedDocument.outerHTML;
};

// Capture the current CSS styles applied on the page
const generateCSS = () => {
    let css = '';
    const styleSheets = document.styleSheets;

    for (let i = 0; i < styleSheets.length; i++) {
        const sheet = styleSheets[i];
        try {
            const rules = sheet.cssRules || sheet.rules; // Get the CSS rules

            for (let j = 0; j < rules.length; j++) {
                css += rules[j].cssText + 'n'; // Combine all the CSS rules
            }
        } catch (e) {
            console.warn("Couldn't access some CSS rules due to CORS policy");
        }
    }
    return css;
};

export default exportPricingPage;

Apart from this feature, any suggestions about improving the code and page is really appreciated.

I tried getting html and css code and I know I could deal with that but only the javascript part I could not understand.