JSFiddle - React, Tailwind, and code Playground

HTML

<input id="0" type="text" class="test" />
<input id="1" type="text" class="test"/>
<input id="3" type="text" class="test"/>

<div id="warning"></div>
<div id="prev"></div>

CSS

.test{display:block;}

JavaScript

$('.test').blur(function() {
    
    
    var src = jQuery(this).val();
    
    var previews = $(".previewImage");
    var drawPreview = true;
    
    var PreviousSource = $(this).data('previousSource');
    
    if(!src.match("^https?://(?:[a-z\-]+\.)+[a-z]{2,6}(?:/[^/#?]+)+\.(?:jpg|gif|png|jpeg)$") && src != "")
    {
         $("#warning").html("Must be an image");
          return false;  
    } else {
        $("#warning").html("");
    }
    
    $.each(previews , function(index, value) { 
        if (src == "" && PreviousSource == $(value).attr('src'))
        {
             $(value).remove();
             drawPreview = false;
             return false; 
        }
        if($(value).attr('src') == src)
        {
            drawPreview = false;
            return false;
        }
    });
    
    if(drawPreview) {
         $('#prev').append('<img class="previewImage" style="max-width:50px;" src="' + src + '">');   
    }
    var previousSource = $(this).data('previousSource', src);
});