JSFiddle - React, Tailwind, and code Playground
HTML
<div id='master-value'>Apples</div>
<div class='fruit-value'>Apples</div>
<div class='some-fruit'>Apples</div>
JavaScript
$.fn.sync = function(arg) {
if ($.isPlainObject(arg)) {
return this.each(function() {
$.data(this, 'syncWith', $(arg.syncWith));
})
} else {
return this.each(function() {
$(this).text(arg)
.data('syncWith').text(arg);
})
}
};
// Set up the sync
$('#master-value').sync({syncWith: '.fruit-value,.some-fruit'});
// Activate a sync
$('#master-value').sync("pears");