Recaptcha and form validation

I try to fix Recaptcha with the updated code with many recaptcha ID’s.

Need help if this code can be improved.
Source: https://stackoverflow.com/questions/1241947/how-do-i-show-multiple-recaptchas-on-a-single-page/41860070#41860070
https://www.debugcn.com/en/article/119620530.html

<!DOCTYPE HTML>

<html>

<head>
<title>Recpatcha</title>
</head>

<body>

<div class="">

<div class="" style="">
<div id="" class="g-recaptcha" style=""></div>

</div><!-- . --></div><!-- . -->

<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?onload=myCallback&render=explicit" async defer></script>
<script type="text/javascript">
var myCallback = function () {
 $('.g-recaptcha').each(function (index, el)
  {
   var widgetId = grecaptcha.render(el,
    {
    'sitekey': 'XXX'
     , 'theme': 'light'
    }
   );
   grecaptcha.reset(jQuery(form).find('#data-widget-id').attr('data-widget-id'));
   if(response.length == 0) {//append error to result div
    form.find('.result').append('<div class="alert alert-danger">' + "Captcha incorrect" + '</div>');}

   $(this).attr('data-widget-id', widgetId);
  }
 );
};

function widgetId(controlId) {
 return $('#' + controlId).attr('data-widget-id');
}
</script>

</body>

</html>