Two or more recaptcha per page, how to implement?

Question

JavaScript

Hello everyone, I'm trying to implement 2 or more recaptcha forms on a page.

I made this option.

Форма #1
<form method="post" action="#">
  <input type="email">
  <div id="recaptcha-1"></div>
  <button type="submit">Отправить</button>
</form>
 
Форма #2
<form method="post" action="#">
  <input type="email">
  <div id="recaptcha-2"></div>
  <button type="submit">Отправить</button>
</form>

<code lang="html">
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit">
<script>
var onloadCallback = function(){
  var key = 'КЛЮЧ_САЙТА';
  grecaptcha.render('recaptcha-1', {
    'sitekey': key
  });
  grecaptcha.render('recaptcha-2', {
    'sitekey': key
  });
};
</script>
</code>

The captcha does not work, as I understand it, I need to edit something in my vlaidation for the form.

How to be now with js which is validation for the form, I have it there.

<script>
    $(function() {

      $('#kbmform').submit(function(event) {
        var alerts = "";
        var errors = false;

        var captcha = grecaptcha.getResponse();

        if (!captcha.length) {
          alerts += "\n Поставьте галочку я не робот.";
          errors = true;
        }

        //подсвечиваем важное поле для заполнения у которых класс valpro2
        $(".valpro2").each(function() {
          if (!$(this).val()) {
            $(this).addClass('validform');
            errors = true;
          } else {
            $(this).removeClass('validform');
          }
        });

        if (errors) {
          alert('Пожалуйста, заполните все обязательные поля.' + alerts);
        }

        if ((errors) && (captcha.length)) {
          formData.append('g-recaptcha-response', captcha);
        }

        if (!errors) {
          var data = $('#kbmform').serialize();
          $.ajax({
            url: 'kbmsend.php',
            type: 'POST',
            data: data,
            success: function(res) {
              if (res == 1) {
                alert('Письмо отправлено, в ближайшее время Вам перезвонит менеджер.');
                document.getElementById('kbmform').reset() //отчистка полей в форме после отправки
              } else {
                alert('Ошибка отправки, попробуйте повторить отправку позднее.');
              }
            },
            error: function() {
              alert('Ошибка!');
            }
          });
        }

        return false;
      });

    });
  </script>

Answer 1

Decision:

<script>
    var recaptcha1;
    var recaptcha2;

    function recaptchaCallback() {
      recaptcha1 = grecaptcha.render('recaptcha-1', {
        'sitekey': '00000000000000000000000000000'
      });

      recaptcha2 = grecaptcha.render('recaptcha-2', {
        'sitekey': '00000000000000000000000000000'
      });
    }
  </script>

Further in ownership
var captcha = grecaptcha.getResponse(recaptcha2);
And more related topic: How to install more than one reCaptcha per page?