Multiple invisible recaptchas always send empty g-recaptcha-response - invisible-recaptcha

Question

I'm using the new invisible recaptcha on my website, and in the homepage I have two forms with recaptcha validation.
Because I'm using more than one recaptcha in the same page, I had to use the method and set it to explicit.
Anyway, I lost an entire day of searching to understand that I need to use grecaptcha.execute() to make it work, but it didn't work even with it, I'm probably doing something wrong, but I don't know what exactly is it, here's some code:
<script type="text/javascript" charset="utf-8">
var onloadCallback = function() {
var recaptchas = document.querySelectorAll('div[class=g-recaptcha]');
for( i = 0; i < recaptchas.length; i++) {
grecaptcha.render( recaptchas[i].id, {
'sitekey' : '',
'badge' : 'inline',
'size' : 'invisible'
});
grecaptcha.execute(i);
}
}
</script>
In the forms I'm using it like this:
<div class="g-recaptcha" id="rc1"></div>
And in the end of the page:
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
I really don't know why it isn't working now, I've set grecaptcha.execute to "i" because I've read that it's a 0 based index, so it should work, but it doesn't

Answer 1

For those wondering how to do it, I got it to work by loading both explicitly, and it worked, like this:
<script src="https://www.google.com/recaptcha/api.js?onload=myCallBack&render=explicit" async defer></script>
<script>
var recaptcha1;
var recaptcha2;
var myCallBack = function() {
//Render recaptcha1 on element with ID "recaptcha1"
recaptcha1 = grecaptcha.render('recaptcha1', {
'sitekey' : 'your-site-key',
'theme' : 'light'
});
//Render recaptcha2 on element with ID "recaptcha2"
recaptcha2 = grecaptcha.render('recaptcha2', {
'sitekey' : 'your-site-key',
'theme' : 'light'
});
};
</script>