Trying to implement recaptcha on several forms including a splash page

Question

I am trying to implement recaptcha using the standard method(not ajax) and what I'm finding is that they are working well on all forms but when I add it to my splash page (which is in a header file), the other forms lose their recaptcha. I assume having the recaptcha in this hidden header form is causing the other forms to fail to display their recaptchas.

I then tried to add it using jquery but only the noscript part is added to the dom. The script won't append.

if ($('form').hasClass('recaptcha')) {
    var noscript = '<nosc'+'ript><iframe src="http://www.google.com/recaptcha/api/noscript?
    k=my_public_key" height="300" width="500" frameborder="0"></iframe><textarea 
    name="recaptcha_challenge_field" rows="3" cols="40"></textarea><input type="hidden" 
    name="recaptcha_response_field" value="manual_challenge"></nosc'+'ript>';
    $('form > ul').append(noscript); //outputs

    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "http://www.google.com/recaptcha/api/challenge?k=my_public_key";
    console.log(s.outerHTML); //actual script as it should read
    $("form > ul").append(s.outerHTML); //fails to output
}

How can I get the recaptcha to display on all forms?

Answer 1

Serj Sagan's cloning solution from half-way down this post solved my issue: How do I show multiple recaptchas on a single page?. Duping it here:

$('#myraterecap').html($('#myrecap').clone(true,true));