JSFiddle - React, Tailwind, and code Playground

HTML

<div class="element-file" title="Do you want to add an image to the Accreditation Text?">
    	<label class="title" style="font-weight: bold;">Add an image to the left of the Accreditation text<br>(Image will be resized to 100px by 100px)</label>
    	
        <label class="medium" >
            	<input type='file' onchange="readURL(this);" />
    	</label>
        	<p><strong>(Image will display below)</strong></p>
    			<div style="max-width: 100px; height: auto; border:1px dashed black;">
                	<img id="accred_image" src="accred" alt="" />
    			</div>
    </div>
    
    	<div class="element-file" title="Do you want to add an image to the Accreditation Text?">
    	<label class="title" style="font-weight: bold;">Would you like to add a logo image?</label>
		
        <label class="medium" >
            	<input type='file' onchange="readURL(this);" />
		</label>
        	<p><strong>(Image will display below)</strong></p>
                	<div style="max-width: 140px; height: auto; border:1px dashed black;">
                    	<img id="blah" src="" alt="" />
                    </div>
	</div>

JavaScript

$("input").change(function(e) {

    for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {

        var file = e.originalEvent.srcElement.files[i];

        var reader = new FileReader();
        reader.onloadend = function() {
             $('#accred_image').attr('src', reader.result);
             $('#blah').attr('src', reader.result);
        }
        reader.readAsDataURL(file);        }
});