I was able to integrate JSzip file download on my website by copying and modifying their example downloader on this link - https://stuk.github.io/jszip/documentation/examples/downloader.html

The main js code used below is used to initiate the download

var $form = $("#download_form").on("submit", function () {

    resetMessage();

    var zip = new JSZip();

    // find every checked item
    $(this).find(":checked").each(function () {
        var $this = $(this);
        var url = $this.data("url");
        var filename = url.replace(/.*\//g, "");
        zip.file(filename, urlToPromise(url), {binary:true});
    });

    // when everything has been downloaded, we can trigger the dl
    zip.generateAsync({type:"blob"}, function updateCallback(metadata) {
        var msg = "progression : " + metadata.percent.toFixed(2) + " %";
        if(metadata.currentFile) {
            msg += ", current file = " + metadata.currentFile;
        }
        showMessage(msg);
        updatePercent(metadata.percent|0);
    })
    .then(function callback(blob) {

        // see FileSaver.js
        saveAs(blob, "example.zip");

        showMessage("done !");
    }, function (e) {
        showError(e);
    });

    return false;
});

However, I want to be able to rename the file names of the downloaded files before they are packaged by the script so that chair.jpg, table.jpg, etc will be packaged as funiture01.jpg, funiture02.jpg, etc.

I read somewhere that I have to create a new file from the checked files and rename with javascript but I am not sure how to proceed at this point.