Multiple invisible reCAPTCHA on a single page

multiple-recaptcha.html

<title>ReCaptcha test</title>

<fieldset>
  <legend>Form 1</legend>
  <form method="post" action="http://httpbin.org/post" target="_blank">
    <p>
      <input type="text" name="form" value="form 1" size="10" />
    </p>
    <input type="hidden" name="captchaKey" />
    <div id="captcha1" class="g-recaptcha" data-size="invisible"></div>
    <p>
      <button type="submit" disabled>Submit</button>
    </p>
  </form>
</fieldset>

<fieldset>
  <legend>Form 2</legend>
  <form method="post" action="http://httpbin.org/post" target="_blank">
    <p>
      <input type="text" name="form" value="form 2" size="10" />
    </p>
    <input type="hidden" name="captchaKey" />
    <div id="captcha2" class="g-recaptcha" data-size="invisible"></div>
    <p>
      <button type="submit" disabled>Submit</button>
    </p>
  </form>
</fieldset>

<script type="text/javascript">
var onloadCallback = function() {
  [].forEach.call(document.querySelectorAll('.g-recaptcha'), function(el){
    var renderCaptcha = grecaptcha.render(el, {
      sitekey: '__YOUR_SITE_KEY___',
      callback: function(token) {
        el.parentNode.querySelector('input[type=hidden]').value = token;
        el.parentNode.querySelector('button[type="submit"]').removeAttribute('disabled');
        return false;
      }
    });
    grecaptcha.execute(renderCaptcha);
  });
};
</script>

<script src='https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit&hl=en-gb' async defer></script>

<!--
  https://developers.google.com/recaptcha/docs/invisible
  http://prathameshsawant.com/multiple-invisible-recaptcha/?i=1
  https://groups.google.com/g/recaptcha/c/7-4Q42nvfLc?pli=1
  https://github.com/prathameshsawant7/multiple-invisible-recaptcha
-->