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);
   });
});

Best practices are:

• Keep everything maximum, stupid, simple.
• It is forbidden to write functions/methods bigger then 20 lines of code.
• It is forbidden to write components/files bigger then ~400 lines of code, create new file, re-use code, create helpers
• Each function/method should do only 1 job - find element in DOM; change color; add event listener; etc, but never all those things together
• Each component (set of functions) should do only 1 job
• Each Higher-order component (set of simple components) should do only 1 job
• Divide data layer and component/business layer
• No side effects
• Use Dependency Injection, 3-tier architecture, component-based architecture
• Code should be easily extendable, changeable, testable
• Component should be easily re-usable in another project