Removing dynamically added event listener does not work

My app has a feature that allows the user to select a unit. In the background, the app will append an event listener for example, to sum a dynamically added <td> element inside the table or when then selected unit is a date then make the <td> a datepicker.

Now, the above feature works perfectly fine yet there is one problem that I am stuck with.

selectUnit.addEventListener("change", function (e) {
                            e.stopPropagation();
                            const tds = trElement.querySelectorAll('td[data-bs-type="unitType"]');   
                            const consolidatedTD = trElement.querySelector("td[data-bs-cns='cns']");
                            const targets = trElement.querySelectorAll("td[data-bs-tgt='tgt']"); 
                            
                            if (tds) { 
                                const unitType = selectUnit.value;   
                                tds.forEach(td => {
                                    td.textContent = '';
                                    const fpInstance = td._flatpickr;

                                    if (td.contentEditable === 'true') {
                                        // Remove all relevant input listeners
                                        td.removeEventListener("input", validateInputTD);
                                        td.removeEventListener("input", validateInputValueTD);

                                        if (targets) {
                                            // Use the function with bound targets and consolidatedTD
                                            targets.forEach(t => {
                                                console.log(t);
                                                t.removeEventListener("input", () => updateConsolidatedValue(targets, consolidatedTD));
                                            });
                                        }

                                        if (unitType == 1) {
                                            td.addEventListener("input", validateInputValueTD); 

                                            // Add the event listeners to the targets
                                            targets.forEach(t => {
                                                t.addEventListener("input", () => updateConsolidatedValue(targets, consolidatedTD));
                                            });

                                        } else if (unitType == 2) {
                                            td.addEventListener("input", validateInputTD);
                                        } else {
                                            td.textContent = "Select date";
                                            flatpickr(td, {
                                                onChange: function (selectedDates, dateStr) {
                                                    td.textContent = dateStr;  // Update the td with selected date
                                                }
                                            });
                                        }

                                        if (fpInstance) {
                                            fpInstance.destroy();
                                        }
                                    }
                                });  
                            } 
                        });

As you can see here on the above code.

I am appending to sum the value of each target <td> when the selected unit is value but when I changed it to another unit, this the event listener is removed yet the functionality of adding the content of the td is still summed up.

function updateConsolidatedValue(targets, consolidatedTD) {
            consolidatedTD.textContent = "";

            // Reset consolidatedValue for each input event
            let consolidatedValue = 0;

            // Recalculate the consolidated value based on current target values
            targets.forEach(t => {
                consolidatedValue += parseInt(t.textContent) || 0;
            });

            // Update the consolidatedTD with the new total
            consolidatedTD.textContent = consolidatedValue;
    }

How can I removed this listener when the value of the select element is changed only to value?