ウェブページのリピート領域にあるGoogle recaptcha

Question

私は、クリックすると、ページのfancyboxライトボックスにフォームを開くいくつかのデータベース生成ボタンがあるページを持っています。フォームは常に同じ情報を求めていますが、各ボタンには区別するためのコードが隠されています（下のコード）

すべてがうまくいきますが、Googleのrecaptchaは最初のボタンにのみ表示されます。それは完全に動作します。ページ上の2番目のボタンには再呼び出しが表示されず、ユーザーがそのボタンをクリックしてそのボタンの詳細を送信することはできません。

私は間違ったことをしたことがありますか、これは単にできません。私はMySQLiとPHPを使用しています。さらに調査では

<div class="container g-pt-20 g-pb-70"> 
        <?php 
while(!$Recordset1->atEnd()) { 
?> 
<div class="row g-bg-gray-light-v4 g-pa-30 g-mb-30" style="border: thin #1A0203; border-radius: 5px"> 

         <div class="col-md-7"> 
         <h2><?php echo($Recordset1->getColumnVal("TITLE")); ?></h2> 
     <?php echo($Recordset1->getColumnVal("DESCRIPTION")); ?> 
         </div> 

         <div class="col-md-3"> 
         <?php if($Recordset1->getColumnVal("IMAGE") != "") {   
?> 
<img src="images/<?php echo($Recordset1->getColumnVal("IMAGE")); ?>" class="img-fluid mx-auto d-block" alt=""/> <?php } 
?> 
         </div> 
         <div class="col-md-2 g-color-black"> 
          <?php echo($Recordset1->getColumnVal("TIMESPAN")); ?> | $<?php echo($Recordset1->getColumnVal("COST")); ?><br><br> 
          <a href="#fancybox-form<?php echo($Recordset1->getColumnVal("ID")); ?>" data-fancybox-speed="350" class="js-fancybox btn btn-md u-btn-indigo g-mr-10 g-mb-15">BOOK NOW</a> 

         </div> 
         </div> 

<div id="fancybox-form<?php echo($Recordset1->getColumnVal("ID")); ?>" 
class="clearfix rounded-0 g-pa-30 w-50" 
style="display: none; min-width:400px;"> 
<form class="form-horizontal" method="post" name="fancybox-form"> 
<fieldset> 

<!-- Form Name --> 
<legend>Request A Day and Time - <?php echo($Recordset1->getColumnVal("TITLE")); ?></legend> 
<input type="hidden" id="ID" name="ID" value="<?php echo rand(111,999999); ?>"> 
<input type="hidden" id="TITLE" name="TITLE" value="<?php echo($Recordset1->getColumnVal("TITLE")); ?>"> 
<!-- Text input--> 
<div class="form-group"> 
<label class="col-md-4 control-label" for="NAME">Your Name</label> 
<div class="col-md-7"> 
<input id="NAME" name="NAME" type="text" placeholder="" class="form-control input-md" required oninvalid="this.setCustomValidity('Please enter your name')" 
oninput="setCustomValidity('')"> 
</div> 
</div> 

<!-- Text input--> 
<div class="form-group"> 
<label class="col-md-4 control-label" for="EMAIL">Your Email</label> 
<div class="col-md-7"> 
<input id="EMAIL" name="EMAIL" type="email" placeholder="" class="form-control input-md" required oninvalid="this.setCustomValidity('Please enter a valid email address')" 
oninput="setCustomValidity('')"> 

</div> 
</div> 

<!-- Text input--> 
<div class="form-group"> 
<label class="col-md-4 control-label" for="PHONE">Your Phone</label> 
    <div class="col-md-7"> 
    <input id="PHONE" name="PHONE" type="text" placeholder="" class="form-control input-md" required oninvalid="this.setCustomValidity('Please enter your phone number')" 
oninput="setCustomValidity('')"> 

    </div> 
</div> 

<!-- Text input--> 
<div class="form-group"> 
    <label class="col-md-4 control-label" for="DATE_REQ">Date Requested</label> 
    <div class="col-md-7"> 
    <input id="DATE_REQ" name="DATE_REQ" type="text" placeholder="" class="form-control input-md" required oninvalid="this.setCustomValidity('Please enter the date you would like to visit')" 
oninput="setCustomValidity('')"> 

    </div> 
</div> 

<!-- Text input--> 
<div class="form-group"> 
    <label class="col-md-4 control-label" for="TIME_REQ">Time Requested</label> 
    <div class="col-md-7"> 
    <input id="TIME_REQ" name="TIME_REQ" type="text" placeholder="" class="form-control input-md" required oninvalid="this.setCustomValidity('Please enter your appointment time')" 
oninput="setCustomValidity('')"> 

    </div> 
</div> 

<!-- Textarea --> 
<div class="form-group"> 
    <label class="col-md-4 control-label" for="textarea">Comments</label> 
    <div class="col-md-7">      
    <textarea class="form-control" id="textarea" name="textarea"></textarea> 
    </div> 
</div> 

<!-- Button --> 
<div class="form-group"> 
    <label class="col-md-4 control-label" for="bookappt"></label> 
    <div class="col-md-7"> 
    <div class="g-recaptcha" data-sitekey="6LdQYRIUAAAAAC020yhPUryaBGst2upxlTSqigqo"></div> <br> 
<button id="bookappt" name="bookappt" class="btn btn-success">Send Your Request</button> 
    </div> 
</div> 

</fieldset> 
</form> 

         </div> 

        </div> 
         <?php 
    $Recordset1->moveNext(); 
} 
$Recordset1->moveFirst(); //return RS to first record 
?> 

Answer 1

私は、これはジャバスクリプトの追加部分、および1行に修飾を有することが可能であることが見出さ...この質問への回答の

<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script> 

<script type="text/javascript"> 
var CaptchaCallback = function() { 
$('.g-recaptcha').each(function(index, el) { 
    grecaptcha.render(el, {'sitekey' : 'your_key'}); 
}); 
}; 
</script> 

多くはenter link description hereで見つけることができます