Form IDs: submitting, getting 2 forms to act as one

When you have

form.addEventListener('submit', function(){})

form.addEventListener('submit', function(){})

, the 'form' which will be submitted is whichever form held the particular type = "submit" button triggering that form submit.

I have a mobile form (

id = "form__mobile"

id = "form__mobile"

), which only contains a 'title' search input and the submit button.

However, there is a modal-expanding button that, if you click it, a modal opens which contains what are meant to be the other 2 inputs of that same form, along with another submit button.

The problem I'm having is that the modal is also a form with a separate id (

id = "form__modal"

id = "form__modal"

).. so when I hit submit on either one, it's only searching on the inputs that were grouped into the form with that submit button, when I need the modal to act like an extension of the same mobile form and vice versa.

If I add a search term to my 'title' input, and then open the modal to also search 'location' input and 'fulltime' input, and then hit 'submit in the modal, then I only get the form returning a search for the latter two inputs, since it sees it as a separate form.

Similarly, if I do the same but I then close the modal and use the "