on() event handler for multiple objects
var before = ace.edit("beforeSQL", {
  showPrintMargin: false,
  fontSize: '14px',
  theme: "ace/theme/sqlserver",
  mode: "ace/mode/sql" 
}),
execute = ace.edit("executeSQL", {
  showPrintMargin: false,
  fontSize: '14px',
  theme: "ace/theme/sqlserver",
  mode: "ace/mode/sql" 
}),
after = ace.edit("afterSQL", {
  showPrintMargin: false,
  fontSize: '14px',
  theme: "ace/theme/sqlserver",
  mode: "ace/mode/sql" 
});


There's a lot of repetition here in terms of the options you're using. You could avoid repeating yourself by creating an object to hold defaults. For example:

const defaults = {
  showPrintMargin: false,
  fontSize: '14px',
  theme: "ace/theme/sqlserver",
  mode: "ace/mode/sql" 
}

var before = ace.edit("beforeSQL", {...defaults})
var execute = ace.edit("executeSQL", {...defaults})
var after = ace.edit("afterSQL", {...defaults})


To avoid repeating yourself when adding an event listener you could do something like this:

[before, execute, after].forEach(obj =&gt; {
  obj.session.on('change', toggleSubmit);
})