JSFiddle - React, Tailwind, and code Playground

HTML

<div id="clickme">Click here</div>
    <div id="lines">
        <div id="line1">
            <img src="http://placehold.it/350x40" alt="" />
        </div>
    </div>

CSS

#lines div {
        opacity:0;
        margin-left:-400px
    }

JavaScript

// get your lines into an array
    var lines = $("#lines div");
    // set a counter
    var currAnim = 0;
    
    // this method will animate a line
    var fadeMoveIn = function (line) {
        $(line).animate({
            opacity: 1,
            marginLeft: 10
        }, {
            queue: true,
            duration: 1000,
            complete: function () {
                // when this line's animation is done
                // trigger the next in the queue
                startQueue();
            }
        });
    };
    
    // this function will fire off your animations one by one
    var startQueue = function () {
        // increment the queue and send that line to be animated
        fadeMoveIn(lines[currAnim++]);
    };
    
    $("#clickme").click(function () {
        startQueue();
    });