Несколько холст E-подпись работает - нужно второе мнение

Question

У меня есть все oop с моей электронной подписью на холсте, и она работает, но я не думаю, что это лучший способ сделать это, и поэтому я хотел бы, чтобы некоторые входные данные и опции сделали это умнее / лучше. Может быть ajax или что-то еще.
Я заметил, что многие люди просят несколько холстов с подписью, поэтому я также публикую это, чтобы показать решение.
Чтобы холст работал в l oop, требуется динамический c id.

CodePen Link

(function($) {
  
  $('.signRow').each(function(){
    
    
    // make dynamic pad id  
    $(this).find('canvas').attr('id', 'signPad' + $(this).index());
    var padId = $(this).find('canvas').attr('id');

    // make dynamic submit BTN id  
    $(this).find('.sig-submitBtn').attr('id', 'sig-submitBtn' + $(this).index());
    var padSubmitId = $(this).find('.sig-submitBtn').attr('id');

    // make dynamic clear BTN id  
    $(this).find('.sig-clearBtn').attr('id', 'sig-clearBtn' + $(this).index());
    var padClearId = $(this).find('.sig-clearBtn').attr('id');

    // make dynamic data url id  
    $(this).find('.sig-dataUrl').attr('id', 'sig-dataUrl' + $(this).index());
    var padDataUrlId = $(this).find('.sig-dataUrl').attr('id');

    // make dynamic img id  
    $(this).find('.sig-image').attr('id', 'sig-image' + $(this).index());
    var padImageId = $(this).find('.sig-image').attr('id');
    

    window.requestAnimFrame = (function (callback) {
      return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimaitonFrame ||
        function (callback) {
          window.setTimeout(callback, 1000 / 60);
        };
    })();


    var canvas = document.getElementById(padId);
    var ctx = canvas.getContext("2d");
    ctx.strokeStyle = "#222222";
    ctx.lineWidth = 4;

    var drawing = false;
    var mousePos = {
      x: 0,
      y: 0
    };
    var lastPos = mousePos;

    canvas.addEventListener("mousedown", function (e) {
      drawing = true;
      lastPos = getMousePos(canvas, e);
    }, false);

    canvas.addEventListener("mouseup", function (e) {
      drawing = false;
    }, false);

    canvas.addEventListener("mousemove", function (e) {
      mousePos = getMousePos(canvas, e);
    }, false);

    // Add touch event support for mobile
    canvas.addEventListener("touchstart", function (e) {

    }, false);

    canvas.addEventListener("touchmove", function (e) {
      var touch = e.touches[0];
      var me = new MouseEvent("mousemove", {
        clientX: touch.clientX,
        clientY: touch.clientY
      });
      canvas.dispatchEvent(me);
    }, false);

    canvas.addEventListener("touchstart", function (e) {
      mousePos = getTouchPos(canvas, e);
      var touch = e.touches[0];
      var me = new MouseEvent("mousedown", {
        clientX: touch.clientX,
        clientY: touch.clientY
      });
      canvas.dispatchEvent(me);
    }, false);

    canvas.addEventListener("touchend", function (e) {
      var me = new MouseEvent("mouseup", {});
      canvas.dispatchEvent(me);
    }, false);

    function getMousePos(canvasDom, mouseEvent) {
      var rect = canvasDom.getBoundingClientRect();
      return {
        x: mouseEvent.clientX - rect.left,
        y: mouseEvent.clientY - rect.top
      }
    }

    function getTouchPos(canvasDom, touchEvent) {
      var rect = canvasDom.getBoundingClientRect();
      return {
        x: touchEvent.touches[0].clientX - rect.left,
        y: touchEvent.touches[0].clientY - rect.top
      }
    }

    function renderCanvas() {
      if (drawing) {
        ctx.moveTo(lastPos.x, lastPos.y);
        ctx.lineTo(mousePos.x, mousePos.y);
        ctx.stroke();
        lastPos = mousePos;
      }
    }

    // Prevent scrolling when touching the canvas
    document.body.addEventListener("touchstart", function (e) {
      if (e.target == canvas) {
        e.preventDefault();
      }
    }, false);
    document.body.addEventListener("touchend", function (e) {
      if (e.target == canvas) {
        e.preventDefault();
      }
    }, false);
    document.body.addEventListener("touchmove", function (e) {
      if (e.target == canvas) {
        e.preventDefault();
      }
    }, false);

    (function drawLoop() {
      requestAnimFrame(drawLoop);
      renderCanvas();
    })();

    function clearCanvas() {
      canvas.width = canvas.width;
    }

    // Set up the UI
    var sigText = document.getElementById(padDataUrlId);
    var sigImage = document.getElementById(padImageId);
    var clearBtn = document.getElementById(padClearId);
    var submitBtn = document.getElementById(padSubmitId);

    clearBtn.addEventListener("click", function (e) {
      clearCanvas();
      // sigText.innerHTML = "Data URL for your signature will go here!";
      sigImage.setAttribute("src", "");
    }, false);

    submitBtn.addEventListener("click", function (e) {
      var dataUrl = canvas.toDataURL();
      sigText.innerHTML = dataUrl;
      sigImage.setAttribute("src", dataUrl);
    }, false);
    
  }); // each function  end
  
})(jQuery);

.signRow:nth-child(even) {
  background: #ededed; 
  padding: 20px;
  margin-top: 40px;
  margin-bottom: 40px;
}
canvas {
  border: 2px dotted #CCCCCC;
  border-radius: 15px;
  cursor: crosshair;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Content -->
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<h1>E-Signature</h1> 
				<p>Sign in the canvas below and save your signature as an image!</p>
			</div>
		</div>
		<div class="row signRow">
			<div class="col-md-12">
		 		<canvas id="" width="620" height="160">
		 			Get a better browser, bro.
		 		</canvas>
        <button class="btn btn-primary sig-submitBtn" id="">Submit Signature</button>
				<button class="btn btn-default sig-clearBtn" id="">Clear Signature</button>
        <textarea class="form-control sig-dataUrl" id="" rows="5">Data URL for your signature will go here!</textarea>
        <img id="" class="sig-image" src="" alt="Your signature will go here!"/>
		 	</div> 
		</div>
    <div class="row signRow">
			<div class="col-md-12">
		 		<canvas id="" width="620" height="160">
		 			Get a better browser, bro.
		 		</canvas>
        <button class="btn btn-primary sig-submitBtn" id="">Submit Signature</button>
				<button class="btn btn-default sig-clearBtn" id="">Clear Signature</button>
        <textarea class="form-control sig-dataUrl" id="" rows="5">Data URL for your signature will go here!</textarea>
        <img id="" class="sig-image" src="" alt="Your signature will go here!"/>
		 	</div> 
		</div>
    <div class="row signRow">
			<div class="col-md-12">
		 		<canvas id="" width="620" height="160">
		 			Get a better browser, bro.
		 		</canvas>
        <button class="btn btn-primary sig-submitBtn" id="">Submit Signature</button>
				<button class="btn btn-default sig-clearBtn" id="">Clear Signature</button>
        <textarea class="form-control sig-dataUrl" id="" rows="5">Data URL for your signature will go here!</textarea>
        <img id="" class="sig-image" src="" alt="Your signature will go here!"/>
		 	</div> 
		</div>
    <div class="row credit">
			<div class="col-md-12">
				<p>Credits to <a href="https://codepen.io/dus7/pen/qGQbVP" target="_blank">Dustin here on Codepen</a></p>
			</div>
		</div>
	</div>