JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <p>
        <button id="add-image">Add Image</button>
    </p>
    <p>
        Hard-coded image that doesn't exist: <img class="no-image-aware" src="http://invalid.jpg"/>
    </p>
    <hr/>
    <div id="image-holder"></div>
</div>

JavaScript

var counter = 0;

$(document).ready(function(){
    $('#add-image').on('click', function(){        
        var image = null;
        
        if(counter%2==0) {
            image = $('<img src="http://blogs.ubc.ca/CourseBlogSample01/wp-content/themes/thesis/rotator/sample-1.jpg" id="dynamic-'+counter+'" class="no-image-aware images"/>');
        } else {
            image = $('<img src="http://invalid.jpg" id="dynamic-'+counter+'" class="images"/>');
        }
        
        $('#image-holder').append(image);
        $('#image-holder').append('<hr/>');
        counter++;
    $(".images").on('load', function(){
        console.log('from delegated load--> ' + $(this).attr('src'));
    });   
    
    $('.images').on("error", function(){
        console.log('from image load--> ' + $(this).attr('src'));
        $(this).hide();
    });
    });    
    
});