JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/animatecss/3.5.1/animate.min.css">
<input id="field" type="text">
<button id="trigger">Make New Alerts</button>

<p>***For each trigger.click 3 alerts will be added to simulate multiple messages at once</p>
<p>The goal is to make them all appear at the bottom of the list one-by-one, <i>pushing the previous one up.</i> </p>


<div id="terminal"></div>

SCSS

body{background:black; color:white;}

p {
    color: #fff;
    font-family: sans-serif;
    letter-spacing: 1px;
}

#terminal span {
font-family: monospace;
    font-size: 2em;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -o-animation-delay: 0s;
}

#terminal span:first-child:after {
    content: " ";
}

#terminal span:after {
  content: "_";
  opacity: 0;
  animation: cursor 1s infinite;
}

#terminal {
    box-sizing: border-box;
    display: table-cell;
    vertical-align: middle;
    position: fixed;
    bottom: 0;
    color: #62FF17;
    font-size: 0.5em;
    padding: 1em;
    text-shadow: 0 0 12px rgba(84, 255, 3, 0.86);
}

@keyframes cursor {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.fadeOutDown {
    -webkit-animation-name: fadeOutDown !important;
    animation-name: fadeOutDown !important;
}

JavaScript

var i = 0;
  
  //====== add alerts to array ======//
  var alertsArray = [];
  function addAlert (message, status) {
    status = status || "1";
    i++;
    alertsArray.push([message, status, i]);
    var time = 00;
    setTimeout( function(){ 
	    iterateThru(message, status);
     }, time)
     time += 00;
  }


  //====== add alert ======//
  function iterateThru (message, status) {
    var time = 500;
    $.each(alertsArray, function(index, item) {
    		
      	//setTimeout(function(){ fireAlerts(message, status); }, 1000);
        setTimeout(fireAlerts, 100, message, status);
				
        //remove
				setTimeout(removeAlert, 4000);
    });  
    // empty array
    alertsArray = [];
  }



function fireAlerts(message, status) {
	//eventually I need to save the result of the below in a var so that I can use $(this) to remove them one-by-one
        $("#terminal").append("<span class=\"d" + i + "\"> " + message + "</span><br>");
}


  //====== removeAlert ======//
  var i = 0;
  function removeAlert (this1){
    $("#terminal span").addClass('fadeOutDown');
    console.log('removed');
  }
  
  
  //====== Trigger ======//
  $("#trigger").click(function( event ) {
  	addAlert ($('#field').val(), 2);
    addAlert ($('#field').val(), 2);
    addAlert ($('#field').val(), 2);
  });