Don’t call grecaptcha.render to render again if it is rendered allready

I have a login dialog with three buttons. “skip”, “login”, “signup”. I use invisible recaptcha to detect if robots click on them. the thing is if I click login and I get sent back an error message like “username is not in DB” and I click login again to try again, I get an error

Uncaught Error: ReCAPTCHA placeholder element must be empty

I think it is because I do the render on every time the button get clicked.

Is there a way to set it it up so I could tell if the badge is rendered or not so I could tell it to render.

I do something like this in click handler:

    if($(this).attr("id") == "login"){
        var login =  grecaptcha.render("login", {"sitekey": "6Le_shsUAAAAAKd8foacccmK6Y635DlIBvX4BQY" , "callback" : verifyCallback, "size" : "invisible"})

        grecaptcha.execute(login);
        console.log(grecaptcha.getResponse(login));

    }else if($(this).attr("id") == "signup"){
        var signup =  grecaptcha.render("signup", {"sitekey": "6Le_shsUAAAAAKdccccK6Y635DlIBvX4BQY" , "callback" : verifyCallback, "size" : "invisible"})

        grecaptcha.execute(signup);
        console.log(grecaptcha.getResponse(signup));
    }


})

I can’t just get the css selector of the badge because it doesn’t associate it to the button.


Source: stackoverflow-javascript