Add upload file and download the uploaded file buttons in each row of the table

Question

I have two tables that dynamically adds and deletes the row. In every row, there are two buttons: upload and download buttons, in the fifth column. I want the buttons to upload a file and download the uploaded file while belonging to the row they are in.

See this code:

const formEl1 = document.querySelector("#formF");
const tbodyEl1 = document.querySelector("#tbodyF");
const tableEl1 = document.querySelector("#tableF");
function onAddWebsite1(e) {
    e.preventDefault();
    const studentNumF = document.getElementById("studentNumF").value;
    const firstNF = document.getElementById("firstNameF").value;
    const lastNF = document.getElementById("lastNameF").value;
    const studentSecF = document.getElementById("studentSecF").value;
    tbodyEl1.innerHTML += `
        <tr>
            <td>${studentNumF}</td>
            <td>${firstNF}</td>
            <td>${lastNF}</td>
            <td>${studentSecF}</td>
            <td>
                <div class="cc1">
                    <label for="upload" class="custom-file-upload">
                        <span id="lbl">Upload E-card</span>
                    </label>
                    <input id="upload" type="file"/>
                    <a id="link" download><i class="fas fa-download"></i></a>
                </div>
            </td>
            <td>
                <div class="cc2">
                    <input type="checkbox" class="checkBox">
                    <button class="deleteBtn">Delete</button>
                </div>
            </td>
        </tr>
    `;
}

function onDeleteRow1(e) {
    if (!e.target.classList.contains("deleteBtn")) {
        return;
    }

    const btn = e.target;
    btn.closest("tr").remove();
}

formEl1.addEventListener("submit", onAddWebsite1);
tableEl1.addEventListener("click", onDeleteRow1);



const formEl2 = document.querySelector("#formM");
const tbodyEl2 = document.querySelector("#tbodyM");
const tableEl2 = document.querySelector("#tableM");
function onAddWebsite2(e) {
    e.preventDefault();
    const studentNumM = document.getElementById("studentNumM").value;
    const firstNM = document.getElementById("firstNameM").value;
    const lastNM = document.getElementById("lastNameM").value;
    const studentSecM = document.getElementById("studentSecM").value;
    tbodyEl2.innerHTML += `
        <tr>
            <td>${studentNumM}</td>
            <td>${firstNM}</td>
            <td>${lastNM}</td>
            <td>${studentSecM}</td>
            <td>
                <div class="cc1">
                    <label for="upload" class="custom-file-upload">
                        <span id="lbl">Upload E-card</span>
                    </label>
                    <input id="upload" type="file"/>
                    <a id="link" download><i class="fas fa-download"></i></a>
                </div>
            </td>
            <td>
                <div class="cc2">
                    <input type="checkbox" class="checkBox">
                    <button class="deleteBtn">Delete</button>
                </div>
            </td>
        </tr>
    `;
}

function onDeleteRow2(e) {
    if (!e.target.classList.contains("deleteBtn")) {
        return;
    }

    const btn = e.target;
    btn.closest("tr").remove();
}

formEl2.addEventListener("submit", onAddWebsite2);
tableEl2.addEventListener("click", onDeleteRow2);

section.grades {
    border: 1px solid transparent;
    width: 100%;
    min-height: 100vh;
    height: auto;
}

.grades .whole_container {
    margin-top: 13vh;
    width: 100%;
    height: 100%;
    border: 1px solid transparent;
    display: flex;
    justify-content: space-around;
}

.grades .max-size1{
    background-color: #ffffff;
    border: 1px solid transparent;
    border-radius: 15px;
    width: 44%;
    min-height: 700px;
    height: auto;
}

.grades .max-size2{
    background-color: #ffffff;
    border: 1px solid transparent;
    border-radius: 15px;
    width: 44%;
    min-height: 700px;
    height: auto;
}

.grades .gradesT {
    padding: 20px 40px;
    width: 100%;
    height: auto;
    background-color: transparent;
}

.grades .gradesT .header {
    font-size: 30px;
    font-weight: bold;
    font-style: italic;
    text-align: center;
    margin-bottom: 20px;
}


.grades .gradesT form {
    width: 100%;
    font-size: 12px;
}

.grades .gradesT .submitM, .grades .gradesT .submitF {
    border: 1px solid #c0c0c0;
    background-color: #e6e6e6;
    color: #000;
    padding: 5px 20px;
    border-radius: 10px;
    font-size: 11px;
    text-transform: uppercase;
    cursor: pointer;
}

.grades .gradesM {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grades .gradesM table{
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    margin: 10px 40px 40px 40px;
    font-size: 14px;
}

.grades .gradesM td {
    border: 1px solid #cfcfcf;
    background-color: #ffffff;
    text-align: center;
    font-size: 11px;
    padding: 10px 5px;
    width: 30px;
    height: 25px;
} 

.grades .gradesM th {
    border: 1px solid #cfcfcf;
    background-color: #e6e6e6;
    height: 50px;
    font-weight: normal;
    font-size: 11px;
}

.grades .gradesM .th1 {
    width: 15%;
}

.grades .gradesM .th2 {
    width: 20%;
}

.cc1 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cc1 input[type="file"] {
    display: none;
}

.cc1 .custom-file-upload {
    background-color: transparent;
    width: 100px;
    margin: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cc1 .custom-file-upload span#lbl{
    font-family: 'Poppins', sans-serif;
    border: 1px solid #d1d1d1;
    background-color: #ececec;
    border-radius: 2px;
    padding: 5px;
    cursor: pointer;
    width: 100px;
    text-align: center;
    font-size: 10px;
}

.cc1 #link {
    font-size: 15px;
    margin: 0 5px;
}

.cc1 #link:link{
    color: #3f6270;
    cursor: pointer;
}

.cc2 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cc2 .checkBox{
    margin: 0 5px;
}

.cc2 .deleteBtn{
    margin: 0 5px;
    font-family: 'Poppins', sans-serif;
    border: 1px solid #d1d1d1;
    background-color: #ececec;
    border-radius: 2px;
    padding: 5px;
    cursor: pointer;
    width: 70px;
    text-align: center;
    font-size: 10px;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
    </head>
    <body>

        <section class="grades" id="grades">
            <div class="whole_container">
                <div class="max-size1">
                    <div class="male" id="male">
                        <div class="gradesT">
                            <div class="header">MALE</div>
                            <form id="formM">
                                <div class="input-row">
                                    <label for="studentNumM">Student No.</label>
                                    <input type="number" name="studentNumM" id="studentNumM" />
                                </div>
                                <div class="input-row">
                                    <label for="firstNameM">First Name</label>
                                    <input type="text" name="firstNameM" id="firstNameM" />
                                </div>
                                <div class="input-row">
                                    <label for="lastNameM">Last Name</label>
                                    <input type="text" name="lastNameM" id="lastNameM" />
                                </div>
                                <div class="input-row">
                                    <label for="studentSecM">Section</label>
                                    <input type="text" name="studentSecM" id="studentSecM" />
                                </div>
                                <button class="submitM">Submit</button>
                            </form>
                        </div>
                        <div class="gradesM">
                            <table id="tableM">
                                <thead>
                                  <tr>
                                    <th class="th1">Student No.</th>
                                    <th class="th1">First Name</th>
                                    <th class="th1">Last Name</th>
                                    <th class="th1">Section</th>
                                    <th class="th2"></th>
                                    <th class="th2"></th>
                                  </tr>
                                </thead>
                                <tbody id="tbodyM"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
    
                <div class="max-size2">
                    <div class="female" id="female">
                        <div class="gradesT">
                            <div class="header">FEMALE</div>
                            <form id="formF">
                                <div class="input-row">
                                    <label for="studentNumF">Student No.</label>
                                    <input type="number" name="studentNumF" id="studentNumF" />
                                </div>
                                <div class="input-row">
                                    <label for="firstNameF">First Name</label>
                                    <input type="text" name="firstNameF" id="firstNameF" />
                                </div>
                                <div class="input-row">
                                    <label for="lastNameF">Last Name</label>
                                    <input type="text" name="lastNameF" id="lastNameF" />
                                </div>
                                <div class="input-row">
                                    <label for="studentSecF">Section</label>
                                    <input type="text" name="studentSecF" id="studentSecF" />
                                </div>
                                <button class="submitF">Submit</button>
                            </form>
                        </div>
                        <div class="gradesM">
                            <table id="tableF">
                                <thead>
                                  <tr>
                                    <th class="th1">Student No.</th>
                                    <th class="th1">First Name</th>
                                    <th class="th1">Last Name</th>
                                    <th class="th1">Section</th>
                                    <th class="th2"></th>
                                    <th class="th2"></th>
                                  </tr>
                                </thead>
                                <tbody id="tbodyF"></tbody>
                            </table>
                        </div>
                    </div>
                
                </div>
            </div>
        </section>

    </body>
</html>

I have done this script code but the download does not work and even if it does, once i upload a file in one of the upload buttons, all download buttons will download that file (i want the download button to download the file uploaded in the upload button relevant only to the row they belong to.) :

const input = document.getElementById('upload');
const link = document.getElementById('link');

let objectURL;

input.addEventListener('change', function () {
    if (objectURL) {
        URL.revokeObjectURL(objectURL);  
    }

    const file = this.files[0];
    objectURL = URL.createObjectURL(file);

    link.download = file.name;
    link.href = objectURL;
});

How can I make this work?