Detect value changes done via JS

Hi there, I would like to simulate multi-page forms by using a text field to show/hide certain groups.

I did it this way:

[text next-page id:hidden_button]

if [next-page] equals "" then show [page-1]
if [next-page] equals "next" then show [page-2]

A button with this function:
if (document.getElementById('hidden_button').value == '') { document.getElementById('hidden_button').value = 'next'} else { document.getElementById('hidden_button').value = ''};

If I type “next” into the text field then the condition works and shows page-2.
If “next” was inserted into the text field via the button’s javascript, it seems the verification isn’t triggered, therefore page-2 won’t be shown.

I’ve tried cf7-multistep plugin, however it requires multiple pages to achieve the effect, which isn’t what I wanted.