Example extra field on checkout

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

<script>
    var obs = new MutationObserver(function(mutations, observer) {
      $.each(mutations, function(i, mutation) {
        var addedNodes = $(mutation.addedNodes);
        var selector = "form, .checkout-step-info";
        var filteredEls = addedNodes.find(selector).addBack(selector);
        filteredEls.each(function() {
        //ADD EXTRA FIELD to SHIPPING OPTIONS
                    $(
                      '<legend class="form-legend optimizedCheckout-headingSecondary">Shipping Acount Number</legend>' +
                        '<input id="gl_number" type="text" name="glnumber"></input>'
                    ).insertAfter("#checkout-shipping-options");       
        });
      });
    });
const config = { childList: true, subtree: true };

function addObserverIfDesiredNodeAvailable() {
    var composeBox = document.querySelectorAll(".checkout-step--shipping")[0];
    if(!composeBox) {
        //The node we need does not exist yet.  //Wait 500ms and try again
        window.setTimeout(addObserverIfDesiredNodeAvailable,500);
        return;
    }
    obs.observe($(".checkout-step--shipping")[0], config);
}
    
addObserverIfDesiredNodeAvailable();

function getVals() {
//GET VALUE AND STORE IN ORDER COMMENT
  var  glnumber = $("#gl_number").val() ? $("#gl_number").val() : "",
    evt = createNewEvent("input"),
    input = document.querySelector('[name="orderComment"]');
  if (input) {
    if (glnumber) {
      setNativeValue(
        input,
        "GL #: " + glnumber
      );
    }
    input.dispatchEvent(evt);
  }
}
function createNewEvent(eventName) {
  var event;
  if (typeof Event === "function") {
    event = new Event(eventName, { bubbles: true });
  } else {
    event = document.createEvent("Event");
    event.initEvent(eventName, true, true);
  }
  return event;
}
  $(document).on("keyup blur focusout", "#gl_number", function() {
    getVals();
  });
    
function setNativeValue(element, value) {
  var valueSetter = Object.getOwnPropertyDescriptor(element, "value").set;
  var prototype = Object.getPrototypeOf(element);
  var prototypeValueSetter = Object.getOwnPropertyDescriptor(
    prototype,
    "value"
  ).set;

  if (valueSetter && valueSetter !== prototypeValueSetter) {
    prototypeValueSetter.call(element, value);
  } else {
    valueSetter.call(element, value);
  }
}
</script>

What a brilliant way of doing things! We are in a similar position: we want to add the custom field of Purchase Order under payment in the Big Commerce one-page checkout. I've modified your script however when trying to getVals() in the querySelector for the name=["orderComment"] it displays null because the element isn't created at that moment. Do you have any suggestions? Or should I just put it in the shipping part?