How to sent ajax request after Successful form submission?

Hi,
I have multiple Contact Form 7 Forms within Bootstrap 5 tab panel. I want to send Ajax request to send some data after each and every successful submission. I used wpcf7mailsent to achieve this. This works only for first tab form. Not for others. All forms within tabs working well and receiving the emails from those. Only thing is Ajax request not firing in other tabs. This is the code I am using so far.

var wpcf7Elm = document.querySelector( '.wpcf7' );
wpcf7Elm.addEventListener( 'wpcf7mailsent', function( event ) {

    var dataSet = {set of serialized data};

    $.ajax({
        type: "POST",
        url: "url",
        data: dataSet,
        dataType:"JSONP",
        success: function(response) {
            console.log( response );
        },
        error: function (data, errorThrown) {
            console.log(errorThrown);
        }
    });

}, false );

This works only for first tab only. Whether I gone through other all tabs, this function only works for First Tab only.

Any help highly appreciated. Thanks