Google reCaptcha reset doesn't work
The grecaptcha.reset() method accepts an optional widget_id parameter, and defaults to the first widget created if unspecified. A widget_id is returned from the grecaptcha.render() method for each widget created. So you need to store this id, and use it to reset that specific widget:
var widgetId = grecaptcha.render(container);grecaptcha.reset(widgetId);
You are passing the wrong id.
$('.g-recaptcha', form).attr('id');
Your selector will capture all 20 reCaptcha widget, but only return a single DOM id (the first reCaptcha). So your code is actually resetting the first recaptcha.
I have two google captcha in same page, two different form
<form id="form1"> <input type="text" name="form1-input"><div class="g-recaptcha" data-sitekey="XXXXXXXXXXXXXXXXX"></div></form>and
<form id="form2"> <input type="text" name="form2-input"><div class="g-recaptcha" data-sitekey="XXXXXXXXXXXXXXXXX"></div></form>You can reset first captcha by
grecaptcha.reset(); or grecaptcha.reset(0);And Second Captcha by index (1)
grecaptcha.reset(1);