JSFiddle - React, Tailwind, and code Playground

(JQuery 1.8.3) Update Multiple HTML Elements post-render simultaneously by targeting the CSS class of their parent element

by Don Schaefer

HTML

<div class="targetClass">
    <p>Text 1</p>
</div>
<div class="targetClass">
    <p>Text 2</p>
</div>
<div class="targetClass">
    <p>Text 3</p>
</div>
<div class="targetClass">
    <p>Text 4</p>
</div>

JavaScript

var attemptCount = 0;

function modifyHTML() {
    //pre-define the # of times the function will attempt to run itself after the page loads so that it does not continue running longer than necessary
    if (attemptCount < 10) {
        attemptCount++;
        if ($(".targetClass").length === 0) {
            //re-attempt the function
            modifyHTML();
        } else {
            $(".targetClass").each(function () {
                //create var to hold the current element's html (without white space)
                var currentHtmlString = $.trim($(this).html());

                var newHtmlString1 = '<p>Text Revision 1</p>';

                var newHtmlString2 = '<p>Text Revision 2</p>';

                switch (currentHtmlString) {

                    case '<p>Text 1</p>':
                        //console.log(currentHtmlString + ' is now being substituted...');
                        $(this).html(newHtmlString1);
                        break;

                    case '<p>Text 2</p>':
                        //console.log(currentHtmlString + ' is now being substituted...');
                        $(this).html(newHtmlString2);
                        break;

                    default:
                        //do nothing
                }
            });
        };
    } else {
        //console.log("Failed");
    }
};
modifyHTML();