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

Website, Application, Performance Turnstile
1

Hello Cloudflare Community,
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.