Generally one only requires one(1) Google reCaptcha on a particular page. In our case the need arose to have two(2) reCaptcha's on the same page. It is fairly simple to achieve this by following a few simple steps:
Create two divs which will house both reCaptchas to be rendered below:
<div id="recaptchaField1"></div>
<div id="RecaptchaField2"></div>
Define a Callback function which will render the reCaptcha in both divs defined above:
<script type="text/javascript">
var CaptchaCallback = function() {
grecaptcha.render('RecaptchaField1', {'sitekey' : '6Lc_your_site_key'});
grecaptcha.render('RecaptchaField2', {'sitekey' : '6Lc_your_site_key'});
};
</script>
Ensure your reCaptcha script url is as follows:
<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>
Many thanks to [Hüseyin Yağlı](https://stackoverflow.com/questions/1241947/how-do-i-show-multiple-recaptchas-on-a-single-page" target="_blank) for this snippet.