Digital Signature Needed

In a web application I’m developing, it requires the end user (our client) to digitally sign a form. I’m currently using the jquery plugin jsignature as a signature pad. I’m able to get it to work in Laravel. (code shown below) When the submit button is clicked it passes the image goes back to the SignaturePadController as a base64 encoded string. How would I turn this into a livewire component?

    <form id="sigForm" method="post" action="{{ route('signature') }}">
        @csrf
        <input type="hidden" id="sigData" name="sigData" value=""/>
        <div id="signatureParent" class="form-group">
            <div id="signature" style="border:1px #d3d3d3 solid;"></div>

            <button type="button"
                    id="clear"
                    class="btn btn-danger mt-2 mb-2" 
                    onclick="$('#signature').jSignature('clear')">Clear</button>

            <button type="submit"
                    id="btnSave"
                    class="btn btn-success">Save</button>
            <br/>
            <textarea id="output" rows="5" cols="50"> </textarea><br/>
            <img src="" id="sigPreview" alt="">
        </div>
    </form>

<script>
$(document).ready(function() {
let $sig = $("#signaturePad").jSignature({syncField: '#output', syncFormat: 'PNG'});

$('#btnSave').on('click', function (e) {
e.preventDefault();

// Get the signature pad data -
let sigData =  $('#signature').jSignature('getData', 'default');

// Set the hidden field value with the value from the sigData variable.
$('#sigData').val(sigData);

// Set the textarea field value with the value from the sigData variable.
//$('#output').val(sigData);

// Set the image source property with the textarea content.
let sigPreview = $('#sigPreview');
sigPreview.attr('src', sigData);
console.log(sigData);
});
})
</script>