How to sync UI state between a page and a fetched sidebar component in Vanilla JS?

Basically you want to entangle elements. Example:

let beingEntangled = false;
let elements = document.querySelectorAll("[data-entangle-input=my-change]");
for (let myChange of elements) {
    const trigger = "input";
    myChange.addEventListener(trigger, function() {
        if (!beingEntangled) {
            beingEntangled = true;
            for (let other of document.querySelectorAll("." + myChange.getAttribute("data-entangle-input"))) {
                if (this !== other) {
                    other.value = this.value;
                }
            }
            beingEntangled = false;
        }
    });
}

In the example above all elements having data-entangle-input=my-change will refresh all elements having a class which matches the one specified, i.e., my-change. Hence the first four inputs refresh (because of having data-entangle-input) each-other (because having the class which matches each-others' data-entangle-input). The fifth input does not have this class, so it will not be refreshed, but will refresh the others.

We use a flag called beingEntangled to make sure we don't get stack overflow extension for elements triggering each-other to have the same event forever.

So basically if you create an attribute to entangle events with class names and add the matching classes wherever you want, then you can do something like this:

let entanglementMap = {
    click: ['click1', 'click2', 'click3'],
    input: ['input1', 'input2', 'input3'],
    //...
};
beingEntangled = false;
for (let event in entangleMap) {
    for (let className of entangleMap[event]) {
        let elements = document.getElementsByClassName(className);
        for (let element of elements) {
            element.addEventListener(event, function() {
                beingEntangled = true;
                for (let other of elements) {
                    if (other !== element) other.value = element.value;
                }
                beingEntangled = false;
            })
        }
    }
}

This is slightly different from the first approach, as this is more general and presumes that all elements having the same class inside entanglementMap should be entangled. Also, here I assumed that you need to refresh the value of the elements. You can apply further abstraction by using a parameterizable function instead of the if (other !== element) other.value = element.value; part, but for the sake of simplicity and brevity I kept it simple, illustrating the idea of entangling elements via class name and linking them together via events.