title: How to use multiple google recaptcha in same page?
body: <p>I have tried 2 code but not work, how can i do ?</p>
  
  <p>When i success on first recaptcha and then click <code>test first recaptcha</code> it's will alert not zero (it's ok) and then click <code>test second captcha</code> why it's alert not zero too. how can i do for use multiplr google recaptcha in same page ?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&amp;render=explicit" async defer&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      var CaptchaCallback = function() {
          grecaptcha.render('recaptcha_1', {'sitekey' : 'MY-sitekey-code'});
          grecaptcha.render('recaptcha_2', {'sitekey' : 'MY-sitekey-code'});
      };
  &lt;/script&gt;
  
  &lt;div id="recaptcha_1" class="g-recaptcha" data-size="compact" data-type="image"&gt;&lt;/div&gt;
  &lt;br&gt;
  &lt;div onclick="test_1_fn()"&gt;test first recaptcha&lt;/div&gt;
  &lt;script&gt;
  function test_1_fn()
  {
   var $captcha = $( '#recaptcha_1' ),
   response = grecaptcha.getResponse();
   alert(response.length);
  }
  &lt;/script&gt;
  
  &lt;br&gt;
  
  &lt;div id="recaptcha_2" class="g-recaptcha" data-size="compact" data-type="image"&gt;&lt;/div&gt;
  &lt;br&gt;
  &lt;div onclick="test_2_fn()"&gt;test&lt;/div&gt;
  &lt;script&gt;
  function test_2_fn()
  {
   var $captcha = $( '#recaptcha_2' ),
   response = grecaptcha.getResponse();
   alert(response.length);
  }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script src='https://www.google.com/recaptcha/api.js'&gt;&lt;/script&gt;
  &lt;div id="recaptcha_1" class="g-recaptcha" data-size="compact" data-type="image" data-sitekey="MY-sitekey-code"&gt;&lt;/div&gt;
  &lt;br&gt;
  &lt;div onclick="test_1_fn()"&gt;test&lt;/div&gt;
  &lt;script&gt;
  function test_1_fn()
  {
   var $captcha = $( '#recaptcha_1' ),
   response = grecaptcha.getResponse();
   alert(response.length);
  }
  &lt;/script&gt;
  
  &lt;br&gt;
  
  &lt;div id="recaptcha_2" class="g-recaptcha" data-size="compact" data-type="image" data-sitekey="MY-sitekey-code"&gt;&lt;/div&gt;
  &lt;br&gt;
  &lt;div onclick="test_2_fn()"&gt;test second captcha&lt;/div&gt;
  &lt;script&gt;
  function test_2_fn()
  {
   var $captcha = $( '#recaptcha_2' ),
   response = grecaptcha.getResponse();
   alert(response.length);
  }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>