Custom field only records input when Add to cart NOT Buy it now

Store Design
1

I added a custom field on my site to gather Instagram Username and made it required but it only works when they Add to cart, it doesn’t work if they click Buy it now.

https://followgator.com/products/100-instagram-followers

How can I make it show up in the order for Buy it now also?

Custom liquid code for custom field:

{% if product.title contains "Instagram" %}

  

{% endif %}

Code I put in global.js

let input = document.querySelector("#username");
let button = document.querySelector(".product-form__submit");

button.disabled = true; 

input.addEventListener("change", stateHandle);

function stateHandle() {
    if (document.querySelector("#username").value === "") {
        button.disabled = true; 
    } else {
        button.disabled = false; 
    }
}

Thanks