同一页上的多个签名框（签名板）

Question

我正在尝试创建具有不同ID的多个签名框，以使用相同的脚本+（清除）&&（撤消）按钮

它与一个完美的签名一起工作 但是，如果我添加多个ID，则会产生冲突 -您可以在下面的PHP示例脚本中找到签名

                          <?php 
                         for ($i = 1; $i <= 4; $i++){

                         $table_row .= '<p class="bold" id="signatureLabel_' . $i . '">'. _l('signature') .' </p>';
                         $table_row .= '<div class="signature-pad--body">';
                         $table_row .= '<canvas id="signature_' . $i . '" height="130" width="550"></canvas>';
                         $table_row .= '</div>';
                         $table_row .= '<input type="text" style="width:1px; height:1px; border:0px;" tabindex="-1" name="signature_' . $i . '" id="signatureInput_' . $i . '">';
                         $table_row .= '<div class="dispay-block">';
                         $table_row .= '<button type="button" class="btn btn-default btn-xs clear mright5" tabindex="-1" data-action="clear_' . $i . '">'. _l('clear') .'</button>';
                         $table_row .= '<button type="button" class="btn btn-default btn-xs" tabindex="-1" data-action="undo_' . $i . '">'. _l('undo') .'</button>';
                         $table_row .= '</div>';

                         echo $table_row;

                         }

                         ?>

这是Javascript示例代码

   function signaturePadChanged() {

   var input = document.getElementById('signatureInput');
   var $signatureLabel = $('#signatureLabel');
   $signatureLabel.removeClass('text-danger');

   if (signaturePad.isEmpty()) {
     $signatureLabel.addClass('text-danger');
     input.value = '';
     return false;
   }
 }

 var canvas = document.getElementById("signature");
 var clearButton = wrapper.querySelector("[data-action=clear]");
 var undoButton = wrapper.querySelector("[data-action=undo]");
 var identityFormSubmit = document.getElementById('add_company_reservation_form');

 var signaturePad = new SignaturePad(canvas, {
  onEnd:function(){
    signaturePadChanged();
  }
});

 clearButton.addEventListener("click", function(event) {
   signaturePad.clear();
   signaturePadChanged();
 });

 undoButton.addEventListener("click", function(event) {
   var data = signaturePad.toData();
   if (data) {
       data.pop(); // remove the last dot or line
       signaturePad.fromData(data);
       signaturePadChanged();
     }
   });