Multiple Signature boxes on the same page (signature pad)

Question

I'm trying to create Multiple Signature boxes with different IDs to work with the same script + (Clear) && (Undo) button

It's working with one signature perfect But if i add more than one id it make conflict - You find below PHP Example script for the signature

                          <?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;

                         }

                         ?>

This is the Javascript Example code

   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();
     }
   });