Data value not updating while dynamically rendering table – Jquery

I have a view in django that utilizes jQuery to retrieve some data from the backend once the user selects some filter options. After the data is retrieved I’m dynamically creating table rows and appending them to the table body. Each row contains data about a release, each release has a unique ID. I would like if the user clicked on any cell in a row, for it to navigate to another page with more information about the release, below is how I’m building the table:

    function updateTable(filtered_releases) {
        var table_body = document.getElementById("release-table-body");

        // append the new data to the table body
        console.log("STARTING TO ADD RELEASES TO NEW TABLE BODY");
        for (const release in filtered_releases) {
            // get all the variables for the release
            var new_release = filtered_releases[release];
            var id = new_release['id'];
            var release_type = new_release['release_type'];
            var business_unit = new_release['business_unit'];
            var product_line = new_release['product_line'];
            var product_id = new_release['product_id'];
            var deployment_project = release_type == "github" ? new_release['repo_name'] : new_release['deployment_project'];
            var deployment_environment = new_release['deployment_environment'];
            var deployment_version = new_release['version'];

            // create the new row
            var new_row = document.createElement("tr");
            new_row.id = "release_" + id;

            // checkbox
            var td_checkbox = document.createElement("td");
            var checkbox = document.createElement("input");
            checkbox.type = "checkbox";
            td_checkbox.appendChild(checkbox);
            new_row.appendChild(td_checkbox);

            // id
            var td_id = document.createElement("td");
            td_id.innerHTML = id;
            td_id.addEventListener("click", function () { navigateToDeploymentView(id) });
            new_row.appendChild(td_id);

            // release_type
            var td_release_type = document.createElement("td");
            td_release_type.innerHTML = release_type;
            td_release_type.addEventListener("click", function () { navigateToDeploymentView(id) });
            new_row.appendChild(td_release_type);

            // business_unit
            var td_business_unit = document.createElement("td");
            td_business_unit.innerHTML = business_unit;
            td_business_unit.addEventListener("click", function () { navigateToDeploymentView(id) });
            new_row.appendChild(td_business_unit);

            // product_line
            var td_product_line = document.createElement("td");
            td_product_line.innerHTML = product_line;
            td_product_line.addEventListener("click", function () { navigateToDeploymentView(id) });
            new_row.appendChild(td_product_line);

            // product_id
            var td_product_id = document.createElement("td");
            td_product_id.innerHTML = product_id;
            td_product_id.addEventListener("click", function () { navigateToDeploymentView(id) });
            new_row.appendChild(td_product_id);

            // deployment_project
            var td_deployment_project = document.createElement("td");
            td_deployment_project.innerHTML = deployment_project;
            td_deployment_project.addEventListener("click", function () { navigateToDeploymentView(id) });
            new_row.appendChild(td_deployment_project);

            // deployment_environment
            var td_deployment_environment = document.createElement("td");
            td_deployment_environment.innerHTML = deployment_environment;
            td_deployment_environment.addEventListener("click", function () { navigateToDeploymentView(id) });
            new_row.appendChild(td_deployment_environment);

            // version
            var td_version = document.createElement("td");
            td_version.innerHTML = deployment_version;
            td_version.addEventListener("click", function () { navigateToDeploymentView(id) });
            new_row.appendChild(td_version);

            // append this new row to the table body
            table_body.appendChild(new_row);
        }
        console.log("FINISHED ADDING RELEASES TO NEW TABLE BODY");
    }

For each cell in the rows I’m assigning the following onclick function, that accepts the id of the release which is assigned when I dynamically create the rows.

    function navigateToDeploymentView(id) {
        window.location = '{{ base_url }}/deployment/?id=' + id;
    }

However once the table is rendered, no matter what row I click on it will always take me to the page correlating to the ID of the last entry. So in this example image, no matter what cell I click on for entries 467 and 468, it will direct me to the page with data about entry 469. So it seems the ‘id’ variable is being updated for all entries after the for loop makes its last iteration. Not sure how to fix this.

I tried setting up the onclick function in the following 2 other ways:

// way 1
td_id.addEventListener("click", function () { 
  window.location = '{{ base_url }}/deployment/?id=' + id;
 });

// way 2
td_id.onclick = function () {navigateToDeploymentView(id)}

I also tried a workaround where I would set each cells id equal to the release id, and passing in the cell to the function so I can access it’s id that way, but it would still only pass in the data from the very last row.