JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/ui-lightness/jquery-ui.css">
<form data-remote="true" action="/echo" method="post">
  <textarea name="" class="textarea" cols="30" rows="10"></textarea>
  <input type="submit">
</form>

JavaScript

$.fn.bindFirst = function(name, selector, fn) {
    this.on(name, selector, fn);
    this.each(function() {
        const handlers = $._data(this, 'events')[name.split('.')[0]];
        console.log(handlers);
        const handler = handlers.pop();
        handlers.splice(0, 0, handler);
    });
};

$( document ).on( 'submit', 'form[data-remote]', function( event ) {
	event.preventDefault();
  alert("bound first, but executing second");
});


$( document ).bindFirst( 'submit', 'form[data-remote]', function ( event ) {
  const textarea = $( this ).find( 'textarea.textarea' );
  const val = textarea.val();
  const str = '\nsign_string';
  textarea.val( `${val}\n${str}` );
  alert("bound second, but executing first." + textarea.val());
} );