How to get Turnstile Widget on the same page with Different ID on rendering

Question

I need a solution for Turnstile rendering. I used client site rendering and it is rendering only once at a time on the front end. I use explicit turnstile callback and on the action hook, I inject the Turnstile for rendering, but on the callback, it gives me only once on window.turnstleCb

The code has given below:

public function __construct() {
        $this->turnstile_context_id = wp_rand();

        add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_scripts' ] );
        add_action( 'wpuf_after_form_render', [ $this, 'render' ] );
    }

public function enqueue_scripts() {
        wp_register_script(
            'ect-wpuf-turnstile-challenges',
            '//challenges.cloudflare.com/turnstile/v0/api.js?onload=ectWPUFTurnstileCb',
            [],
            wp_turnstile()->api_version,
            true
        );

        $site_key = wp_turnstile()->settings->get( 'site_key' );
        $script = "window.ectWPUFTurnstileCb = function () {
            if ( document.getElementById( 'ect-turnstile-container-{$this->turnstile_context_id}' ) ) {
                turnstile.render('#ect-turnstile-container-{$this->turnstile_context_id}', {
                    sitekey: '" . esc_attr( $site_key ) . "',
                    callback: function(token) {
                        var form = document.querySelector('.wpuf-login-form input[type=submit]');
                        var postForm = document.querySelector('.wpuf-form-add .wpuf-submit-button');
                        if(form){
                            form.style.pointerEvents = 'auto';
                            form.style.opacity = '1';
                        }
                        if(postForm){
                            postForm.style.pointerEvents = 'auto';
                            postForm.style.opacity = '1';
                        }
                    }
                });
}
        };";

        wp_add_inline_script( 'ect-wpuf-turnstile-challenges', $script, 'before' );
        wp_enqueue_script( 'ect-wpuf-turnstile-challenges' );
    }

    public function render() {
        $html = sprintf(
            '<div id="ect-turnstile-container-%s" data-sitekey="%s" data-theme="%s" data-submit-button="%s"></div>',
            $this->turnstile_context_id,
            esc_attr( wp_turnstile()->settings->get( 'site_key' ) ),
            esc_attr( wp_turnstile()->settings->get( 'theme', 'light' ) ),
            esc_attr( wp_validate_boolean( wp_turnstile()->settings->get( 'button_access', 'false' ) ) ),
        );

        if ( wp_validate_boolean( wp_turnstile()->settings->get( 'button_access', 'false' ) ) ) {
            $html .= '<style>
                .wpuf-login-form input[type=submit] {
                    pointer-events: none;
                    opacity: .5;
                }
                .wpuf-form-add .wpuf-submit-button{
                    pointer-events: none;
                    opacity: .5;
                }
            </style>';
        }

        echo ( $html);
    }

I gave data-id, data-sitekey, data-theme, and data-submit-button.
Turnstile is working fine on 2 separate pages, but when I give it to 1 page with 2 separate forms, it only renders on 1 form, and on the other form the Turnstile widget isn’t calling.

Please share me the explanation of why it is not rendering.