multiple recaptchas on one page
<p>First of all, I found this approach here: <a href="https://stackoverflow.com/questions/1241947/how-do-i-show-multiple-recaptchas-on-a-single-page/28126317#28126317">How do I show multiple recaptchas on a single page?</a></p>

<p>I tried to use the same method like mentioned here, but that didn't do the trick. In my case, I'm using a typo3-instance, which has to have multiple (2) recaptchas on the same page. </p>

<p>Like mentioned in the answer above, I have a link like this in my <code>&lt;head&gt;</code></p>

<pre><code>&lt;script src="//www.google.com/recaptcha/api.js?onload=CaptchaCallback&amp;render=explic‌​it" async defer&gt;&lt;/script&gt;  
</code></pre>

<p>Then comes the tricky part and I guess, this is where I am stuck: </p>

<p>I tried using the advised JS-snippet, but that didn't do anything. I put the JS-code in a js-file, as well as in my template, to see if the location causes troubles. However, nothing worked.</p>

<p>This is the JS-code i'm using (now taken from the template-file)</p>

<pre><code>&lt;script type="text/javascript"&gt;
var CaptchaCallback = function () {
    console.log("arrived");
    $('.g-recaptcha').each(function (index, el) {
        grecaptcha.render(el, {'sitekey': 'my-key'});
    });
};
</code></pre>

<p></p>

<p>And this is how I try to disply my recaptchas:</p>

<pre><code>&lt;div class="g-recaptcha" data-sitekey="{settings.recaptcha.sitekey}" id="recaptcha_{field.uid}"&gt;&lt;/div&gt;
</code></pre>

<p>which ends up beeing something like this: </p>

<pre><code>&lt;div class="g-recaptcha" data-sitekey="abc-" id="recaptcha_21"&gt;&lt;/div&gt;
</code></pre>

<p>No errors in my js-console as well... </p>

<p>Any ideas?</p>