Using hx-disabled-elt on form associated/external submit button

[BregtDeLange]

I want to disable a submit button when a request is in flight. My submit button is outside the form, but I associate it with the "form" attribute.

<form hx-post="...">

</form>

<button type="submit" form="@formId" hx-disabled-elt="this" id="submit-button">
    Submit
</button>

However, the hx-disabled-elt doesn't add the disabled attribute when the request is happening. I understand that this button is not technically part of the form yet it is associated with it. I can add hx-disabled-elt to the form and use an id to make sure they're connected

<form ... hx-disabled-elt="#submit-button">`

</form

But that feels a bit verbose as I might have several submit buttons for the same button.

I tried a script as well but feels too much hacking into the request flow

// Simplified
document.body.addEventListener("htmx:beforeSend", (evt) => {
    const target = evt.detail.elt;

    if (target.tagName === "FORM" && target.id) {
        const externalButtons = document.querySelectorAll(`button[form="${target.id}"]`);
        externalButtons.forEach((btn) => {
            btn.classList.add("htmx-request");
            btn.disabled = true;
        });
    }
});

So I'm a bit unsure what approach I take best here. What are my options?