JSFiddle - React, Tailwind, and code Playground

HTML

<script src="jquery-1.9.1.min.js"></script>
<script src="jquery.signaturepad.min.js"></script>
<script src="json2.min.js"></script>
<script src="functions.js"></script>

<body>
<form method="post" class="sigPad">
  <label for="name">Print your name</label>
  <input type="text" name="name" id="name" class="name">
  <p class="typeItDesc">Review your signature</p>
  <p class="drawItDesc">Draw your signature</p>
  <ul class="sigNav">
    <li class="typeIt"><a href="#type-it" class="current">Type It</a></li>
    <li class="drawIt"><a href="#draw-it">Draw It</a></li>
    <li class="clearButton"><a href="#clear">Clear</a></li>
  </ul>
  <div class="sig sigWrapper">
    <div class="typed"></div>
    <canvas class="pad" width="198" height="55"></canvas>
    <input type="hidden" name="output" class="output">
  </div>
 <input type="button" id="btnSubmit" value="Submit"/>
</form>
<form class="sigReturn">
	<p>Canvas in server:</p>
	<div class="sig sigWrapper">
    	<div class="typed"></div>
		    <canvas class="pad" width="198" height="55"></canvas>
		</div>
		<input type="button" id="btnGet" value="Get sig stored"/>
</form>
<div id="dis"></div>

JavaScript

$(document).ready(function () {

	var options = {
		defaultAction: 'drawIt',
		drawOnly: true,
		bgColour : '#000'

	}

	var ReadOnly = {
		displayOnly: true,
		penColour: '#000',
		bgColour : '#FFF'


	}

  $('.sigPad').signaturePad(options);
  

  $('#btnSubmit').on('click', function(){
  	var output = $('.output').val();
  	$.ajax({
  		type: "POST",
  		url: "save_sign.php",
  		data: {output: output},
  		success: function(data){
  			alert(data);
  			$('#dis').html(data);

  		}

  	});
  });

  $('#btnGet').on('click', function(){
  	alert("hit");
  	var sig = [];
  	$.ajax({
  		type: "POST",
  		url: "return_sign.php",
  		data: {value: "10"},
  		success: function(data){
  			alert(data);
  			$('#dis').html(data);

  			$('.sigReturn').signaturePad(ReadOnly).regenerate(data);

  		}

  	});

  	});
});