I have a DOM element like this: <div id=’master-value’>Apples</div> I have many other elements

Question

0

Asked: May 17, 20262026-05-17T17:07:46+00:00 2026-05-17T17:07:46+00:00

I have a DOM element like this: <div id=’master-value’>Apples</div> I have many other elements

0

I have a DOM element like this:

<div id='master-value'>Apples</div>

I have many other elements elsewhere on the page that I need to sync with the ‘master-value’.

<div class='fruit-value' data-reference='master-value'>Apples</div>
<div class='some-fruit' data-reference='master-value'>Apples</div>

When I change the value of the ‘master-value’, I want all the synced elements to update with it.

$('#master-value').text('Pears');

Should affect:

<div class='fruit-value' data-reference='master-value'>Pears</div>
<div class='some-fruit' data-reference='master-value'>Pears</div>

What I don’t want, is on every change of ‘master-value’ to have to search through all the elements in order to find the synced elements in order to change them. I think that’s quite slow when there are many elements that needs to be searched through.

There should be some way for the child values to be pre-bound to the master value so that the selection goes quickly.

$('.fruit-value, .some-fruit').sync('#master-value');

I have some ideas, for instance: I can create an array of preselected synced objects, bind a custom event on the master value and run that event whenever I change the value. The event would go through the array to update all the child elements.

I’m sure there’s a better way of doing it though…

Thanks!