Issue related to event propagation

I’m having an issue with event propagation in JavaScript. I have different data and single form attached to each child element. To prevent an event from propagating to each child element and it’s parent I am using stopImmediatePropagation(). The other method like following doesn’t work.

event.cancelBubble = true;
//OR
event.stopPropagation();
//OR
yourFormSubmissionElement.removeEventListener('submit', submitCreatePlistForm, false);
yourFormSubmissionElement.addEventListener('submit', submitCreatePlistForm, false)

Problem that I’m having is that the data that was linked to each individual element become same in each call, i.e. if the form submission was to send DATA01, DATA02, DATA03 etc. for element1, element2, element3… respectively, then on each submission DATA01 is sent back to backend when I use stopImmediatePropagation() in this.

//Each Button in the playlist has this event listener with their own data passed as argument
const listenFormSubmission = async (data) => {
    const taskAForm = document.querySelector('<selector>');

    const submitTaskAForm = async function(e) {
        e.preventDefault();
        // e.cancelBubble = true;
        // e.stopPropagation();
        e.stopImmediatePropagation();

        await axios.post('/target', data).then(async function(errResponse){
            console.log(errResponse)});
        }
        taskAForm.addEventListener('submit', submitTaskAForm, false);
    }

If anyone can give suggestions on how to handle this, that will be of great help.
And though I already have gone through most of the related articles and questions any other useful reference in your knowledge will be greatly appreciated.