Google ReCaptcha（jQuery）：触发了错误的回调

Question

我有一个网站，在一个页面上有多个带有Google ReCaptcha的表格。我将验证码呈现为小部件ID，然后执行该小部件ID。但是当我提交表单时，提交了错误的窗口小部件ID。

var widgetonSubmit;
var widgetLookingFor;

var onloadCaptcha = function() {
  if (typeof onSubmit !== 'undefined' && $.isFunction(onSubmit)) {
    widgetonSubmit = grecaptcha.render(document.getElementById('recaptcha'), {
      'sitekey': sitekey,
      'callback': onSubmit
    });
  }

  if (typeof SubmitLookingFor !== 'undefined' && $.isFunction(SubmitLookingFor)) {
    widgetLookingFor = grecaptcha.render(document.getElementById('recaptchaSubmitLookingFor'), {
      'sitekey': sitekey,
      'callback': SubmitLookingFor
    });
  }
}

$('#frmLookingFor').submit(function(event) {
  event.preventDefault();
  // do some validation
  grecaptcha.execute(widgetLookingFor);
});

function SubmitLookingFor(response) {
  var frmContactPopup = $('#frmLookingFor');
  $.ajax({
    type: frmContactPopup.attr('method'),
    url: frmContactPopup.attr('action'),
    data: frmContactPopup.serialize(),
    success: function(data) {
      console.log(data);
    }
  });
}

$('#frmSiteContact').submit(function(event) {
  event.preventDefault();

  // do some validation
  grecaptcha.execute(widgetonSubmit);

});

function onSubmit(response) {
  var contactForm = jQuery('#frmSiteContact');
  jQuery.ajax({
    type: contactForm.attr('method'),
    url: contactForm.attr('action'),
    data: contactForm.serialize(),
    success: function(data) {
      console.log(data);
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src='https://www.google.com/recaptcha/api.js?onload=onloadCaptcha&render=explicit' async defer></script>

<form id="frmSiteContact">
  <div id='recaptcha' class="g-recaptcha" data-size="invisible"></div>
</form>

<form id="frmLookingFor">
  <div id='recaptchaSubmitLookingFor' class="g-recaptcha" data-size="invisible"></div>
</form>

提交ID为frmLookingFor的表单时，将执行onSubmit（）函数，而不是SubmitLookingFor（）

这是什么问题？我该如何解决呢？