JSFiddle - React, Tailwind, and code Playground

HTML

<input id="user_input" type="text" placeholder="User Input" value="test">
<button id="process" type="button">Process</button>
<br>
<textarea id="output" row="4" cols="60" style="height:60px"></textarea>
    
<div id="images">
</div>

JavaScript

var getLinks = function(value){
        var links = [
                'http://placehold.it/100x100/ff0000&text=<<USER_INPUT>>',
                'http://placehold.it/100x100/0000ff&text=<<USER_INPUT>>',
                'http://placehold.it/100x100/00ff00&text=<<USER_INPUT>>',
                'http://placehold.it/100x100/ff00ff&text=<<USER_INPUT>>',
            ];
        
            $.each(links, function(idx, link){
                links[idx] = link.replace('<<USER_INPUT>>', value);
            });
            
            return links;
    },
    processForm = function(){
        var value = $('#user_input').val(),
            links = getLinks(value),
            getText = function(){
                var h = '';
                $.each(links, function(idx, link){
                    h += link + "\n";
                });
                return h;
            },
            addImages = function(){
                var h = '';
                
                $.each(links, function(idx, link){
                    h += '<img src="'+link+'">';
                });
                
                $('#images').html(h);
            };
        
        $('#output').val(getText());
        addImages();
    };

$('#process').on('click', processForm);