JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mypage" data-role="page">
    <a href="#" id="btn1" data-role="button">download 1</a>
    <a href="#" id="btn2" data-role="button">download 2</a>
    <a href="#" id="btn3" data-role="button">download 3</a>
    <a href="#" id="downloadall" data-role="button" >DOWNLOAD ALL</a>
</div>

JavaScript

$(document).ready(function(){
    $("#btn1").attr({
        'download' : 'file1.csv',
        'href' : "file;one",
        'target' : '_blank'
    });
    $("#btn2").attr({
        'download' : 'file2.csv',
        'href' : "file;two",
        'target' : '_blank'
    });
    $("#btn3").attr({
        'download' : 'file3.csv',
        'href' : "file;three",
        'target' : '_blank'
    });
    $("#downloadall").on("click", function(){
       document.getElementById("btn1").click();
       document.getElementById("btn2").click();
       document.getElementById("btn3").click();
    });
});