Many codebases are hard to maintain after a while if there were no architect or any engineer keeping architecture up-to-date and maintainable.
Another problem was because many old apps were simple, nobody used any architecture patterns with jQuery and real software engineers weren't using JavaScript. JS was written by people without experience in software engineering and architecture, thus all the problems. Later when JS side became much complicated many engineers came into JS and that's why we started seeing all those frameworks. With jQuery there was just a single large file with single DOM ready, however, with the right mind and the help of right libraries and jQuery plugins there was a maintainable MVC and component-based architecture already.
What is popular to call a "state" today is just a same data layer and each component should be independent. Nothing changed since times much older then jQuery. There were just many bad code examples with large functions and global variables.
What you can and should do today even with legacy code - is to use Vanilla JS and same component-based architecture. Business logic defines your components and they might be just functions or plain objects.
Create a single object and write as many small simple methods as you need:
Since It is very hard to understand what exactly you were trying to build, I will provide very simple code example:
// data layer should be always separated from the business layer
// ideally it should be a Model which is based on the core Api/Ajax/HTTP object
const Api = {
getDates() {
// ajax to return Promise
}
};
// at the beginning it might be 1 object,
// later if there will be more logic - it can be divided into: ,
// events, presentation/UI, core business/controller logic, localization, configuration, etc
const Component = {
init(element) {
element._state = {}; // here you can store you data/state related only to this element
this.addEvents(element);
// ...
},
addEvents(element) {
// all element.addEventListener() you need on component init
},
populateDropdowns(dropdowns, data) {
// ...
},
// ...
};
document.addEventListener('DOMContentLoaded', () => {
[].forEach.call(document.getElementsByTagName('mycomponent'), component => {
Component.init(component);
});
});