JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">Test</div>

JavaScript

// Supposing that I want to apply the style color: red; for every .test element
// I do it:
$('div.test').each(function(){
   $(this).css('color', 'red'); 
});

// Or I simply:
// $('div.test').css('color', 'red');

// Right, but supposing that I make a new element div.test
// Example:
$('body').append(
    $('<div class="test">New</div>')
);

// If I need that this be color: red; too, I need repeat:
$('div.test').css('color', 'red');

// My suggestion is:
// A method called, for instance, 'every', do something EVERY
// new change: creating, moving, changing or removing
// a element.
// Example:
$.fn.every = $.noop;
$('div.test').every(function(){
    $(this).css('color', 'red');
});

// This method will work on start how .each()
// getting all div.test elements and apply
// style color: red;

// But, if I do:
$('body').append(
    $('<div class="test">New</div>')
);

// The 'every' method will apply the function
// on this new element created, after append this.

// Need to exists too much mode of activate .every() function
// How: on create, on change, on move or on delete.
// This CAN works similar to events:
$('body').every(function(ev){
    if(ev.type === 'change'){
        $(this).css('color', 'red');
    }
});

// In this case, if I do:
$('body').attr('style', 'font-family: tahoma;');
// Will be executed event, passing .type="change"
// In this case, the method executed will make
// the execution of your content.
// In this case, the body results can be:
// <body style="font-family: tahoma; color: red">