signaturepad is not signing on the form

Hi Team

I need some help with my form, signaturepad is not signing meanwhile the buttons are working and dont have errors and yet im using the correct libraries. 

// css code

#signature-pad {
  display: flex;
  align-items: center;
}

#signature-pad .sigWrapper {
  height: 50px;
  width: 300px;
  border: 1px solid #ccc;
  position: relative;
  margin-right: 10px;
}

#signature-pad canvas {
  position: absolute;
  left: 0;
  top: 0;
}

.signature-button {
  margin-left: 10px;
}

// js code

$(document).ready(function() {
  // initialize signature pad
  var canvas = document.getElementById('signatureCanvas');
  var signaturePad = new SignaturePad(canvas);

  // handle clear button click
  $('#clearSignatureButton').click(function(){
      console.log('Clear button clicked!');
      signaturePad.clear();
      alert("Test1");
  });

  // handle save button click
  $('#saveSignatureButton').click(function(){
      var signatureDataURL = signaturePad.toDataURL();
      alert("test2");

      // send signature to the server.
      $.ajax({
          type:'POST',
          url:'save_signature.php',
          data:{
              signature: signatureDataURL
          }
      }).done(function(response){
          console.log(response);
      });
  });
});

// html code

<!-- signature Section -->
<div class="single-form">
 <div id="signature-pad" class="sig sigWrapper">
<div class="display-block signature-pad" style="touch-action: none;">
<label for="signatureCanvas">Signature </label>
<div class="signature-input-container">
<canvas id="signatureCanvas"></canvas>
<button id="clearSignatureButton" class="signature-button">Clear</button>
<button id="saveSignatureButton" class="signature-button">Save</button>
</div>
</div>
</div>