Best practice for keeping modular Javascript simple

I'm buidling a Javascript application that's become quite complicated. I'm increasingly getting stuck when debugging it.

I'll describe one issue I've been facing as best I can. I have a module that adds and removes sets of HTML elements within a form. I have another module that reorders those sets, and a third module that updates their index values (e.g. IDs and form input names).

In some instances these sets contain other elements that have modules associated with them, for example images and image spaces in the form trigger a popup to open with an image upload fields and an image editor module.

The popup-image-editor module uses the ID of the set it belongs to, in order to scroll that set into view when it pops up. This is fine except, when the user reorders the sets because the module has already defined it's own configs with the ID it had in it's original position. When it's been reordered the ID the module is using no longer relates to that set but to another set that's sitting in the targetted set's original position.

It sounds complicated an in many ways that's why I'm writing this post. I'm looking for help, tips, ideas, advice on keeping module JS simple. I think I've hit a point where this is more complex than I'm used to and would appreciate some input.

One idea I have to solve this specific problem is to have the indexing module publish a topic/message when it's finished reindexing. The popup/image-editing modules could subscribe to this topic and update the IDs in their configs when this topic is published.

Does anyone have any ideas on the best way to solve this particular decision point? And can anyone make any suggestions to help me keep my JS applications well organised, if not simple.

Thanks in advance!