Signaturepad is not working clear button on the form

Question

Hi Team

I have a signaturepad, created two button one to clear and save(back-end) have not yet do this. But the problem is on clear button(jquery button its not clearing the signaturepad from the form and its a business rule. How can i achieve this my code i did debug no error. is there any mate who can replacate this code and show me what was the issue?

// HTML code
<div class="single-form">
    <div id="signature-pad" class="sig sigWrapper">
     <div class="display-block signature-pad" style="touch-action: none;">
       <label for="signatureInput">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>
    <!-- style -- inline buttons and hide -->
     <style>

        #signature-pad {
        display: inline-block;
        position: relative;
        }

        #signature-pad .display-block {
        display: inline-block;
        }

        #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-pad button {
         display: inline-block;
        }

     </style>
</div>
</div>

// javascript code
/**
 * @author:Gcobani Mkontwana
 * @date:15/06/2023
 * @signature to allow a user to sign using jquery library.
 *
 */

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