JSFiddle - React, Tailwind, and code Playground

HTML

<div id="clickme">Click here</div>

<div class="testdiv">
    <p>Example of working run_imgprocess():</p>
	<div class="hhImageBox">
		<img src="http://rb2k1.com/misc/large/basic.jpg" alt="" />
	</div>
</div>

<div class="puthere"></div>

CSS

#clickme{
    font-family: arial;
    font-size: 11px;
    display: inline-block;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    cursor: pointer;
    padding: 0px 5px;
}

.hhImageBox{
    width: 100px;
    height: 100px;
    border:1px solid magenta;
}

#clickme:hover{
    background-color: #e1e1e1;
}

JavaScript

// Run On Load
run_imgprocess()

// Click Handler
$("#clickme").click(function() {
    
    $(".puthere").append("<p>Appended:</p><div class=\"hhImageBox\"><img src=\"http://rb2k1.com/misc/large/hugephoto.jpg\" alt=\"\" /></div>");
    $(".puthere").append("<p>Appended:</p><div class=\"hhImageBox\"><img src=\"http://rb2k1.com/misc/large/hugephoto2.jpg\" alt=\"\" /></div>");
    $(".puthere").append("<p>Appended:</p><div class=\"hhImageBox\"><img src=\"http://rb2k1.com/misc/large/hugephoto3.jpg\" alt=\"\" /></div>");
    $(".puthere").append("<p>Appended:</p><div class=\"hhImageBox\"><img src=\"http://rb2k1.com/misc/large/hugephoto4.jpg\" alt=\"\" /></div>");
    $(".puthere").append("<p>Appended:</p><div class=\"hhImageBox\"><img src=\"http://rb2k1.com/misc/large/hugephoto5.jpg\" alt=\"\" /></div>");
    $(".puthere").append("<p>Appended:</p><div class=\"hhImageBox\"><img src=\"http://rb2k1.com/misc/large/hugephoto6.jpg\" alt=\"\" /></div>");
    $(".puthere").append("<p>Appended:</p><div class=\"hhImageBox\"><img src=\"http://rb2k1.com/misc/large/hugephoto7.jpg\" alt=\"\" /></div>");
    $(".puthere").append("<p>Appended:</p><div class=\"hhImageBox\"><img src=\"http://rb2k1.com/misc/large/hugephoto8.jpg\" alt=\"\" /></div>");
    $(".puthere").append("<p>Appended:</p><div class=\"hhImageBox\"><img src=\"http://rb2k1.com/misc/large/hugephoto9.jpg\" alt=\"\" /></div>");
    
    $(".hhImageBox:not(.processed) img").load(function(){
		run_imgprocess();
	});

});

// Function
function run_imgprocess() {
	// ONLY RUN IF IT HASNT BEEN PROCESSED YET
    $(".hhImageBox:not(.processed)").each(function () {
	
		// ONLY PROCESS VISIBLE IMAGES IF ITS PARENT IS VISIBLE
		if ($(this).parent().is(":visible")){
			$(this).css('overflow', 'hidden'); 					// SET CLASS TO OVERFLOW HIDDEN
			var imageContainerWidth = $(this).width(); 			// GET WIDTH OF IMAGE CONTAINER
			var imageContainerHeight = $(this).height(); 		// GET HEIGHT OF IMAGE CONTAINER
			var imageWidth = $("img",...