how to enable Multiple reCAPTCHA in single page

Question

i have implemented two recaptcha in single page , but only one is recaptcha is working

My code is for the captcha 1

    <div class="resumator-label resumator-resume-text" id="resumator-recaptcha_forward-label">Human Check*</div>
    <div class="resumator-input" id="resumator-recaptcha_forward-field">
        <div id="div_error_resumator-forward-recaptcha-value" class="dv_error"><span>Please enter the text:</span></div><script type="text/javascript" src="//www.google.com/recaptcha/api/challenge?k=6Ld99tsSAAAAAIy-Zv3YKxCOefk2IXELOBVNhM7Y"></script>

<noscript>
    <iframe src="//www.google.com/recaptcha/api/noscript?k=6Ld99tsSAAAAAIy-Zv3YKxCOefk2IXELOBVNhM7Y" height="300" width="500" frameborder="0"></iframe><br/>
    <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
    <input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
</noscript>
    </div>

Code for the other other captcha

         <div class="resumator-field-wrapper resumator-resume-text" id="resumator-recaptcha">
    <div class="resumator-label resumator-resume-text" id="resumator-recaptcha-label">Human Check*</div>
    <div class="resumator-input" id="resumator-recaptcha-field">
        <script type="text/javascript" src="//www.google.com/recaptcha/api/challenge?k=6Ld99tsSAAAAAIy-Zv3YKxCOefk2IXELOBVNhM7Y"></script>

<noscript>
    <iframe src="//www.google.com/recaptcha/api/noscript?k=6Ld99tsSAAAAAIy-Zv3YKxCOefk2IXELOBVNhM7Y" height="300" width="500" frameborder="0"></iframe><br/>
    <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
    <input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
</noscript>
    </div>
</div>

I have also use clone that is work fine

// Duplicate our reCapcha

         $('#resumator-recaptcha-label').html($('#resumator-recaptcha_forward').clone(true,true));

problem in the clone captcha its reload captcha and other links are not working for the new clone captcha

Answer 1

you can try this adding new class in a second recaptcha loader button then you bind event on that class with click event and again clone your node and also used setTimeout function which will wait for redraw captcha Hope this will help you

 setTimeout(function() {
        $( "#resumator-recaptcha #recaptcha_widget_div #recaptcha_reload_btn " ).addClass("reload_captcha");


         $(document).on('click', '.reload_captcha', function(e){
             $('#resumator-recaptcha-label').html($('#resumator-recaptcha_forward').clone(true,true));

             $( "#resumator-recaptcha #recaptcha_widget_div #recaptcha_reload_btn " ).addClass("reload_captcha");


        });

    }, 2000);