JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<p>
<form>
Aggiungi <input id="numero" name="numero" type="text" maxlength="2" size="2" value="5" /> alla lista <button type="button" onclick="aggiungiElementi(this.form.numero.value)">OK</button>
</form>
</p>
<ul id="lista">

</ul>

CSS

ul { list-style-type: none; padding:0; margin:0;}
li { display: block; background:#eee; border:1px solid #ccc; margin-botton: 4px; padding:4px;}

JavaScript

var elementi = [];
var interval = null;
var durataAnimazioneInMillisecondi = 100;
window.aggiungiElementi = function(numero){
if (!numero || isNaN(numero)){
	alert("Digita un numero");
  return;
}

for (var i = 1; i<=numero; i++){
   elementi.push($("<li>Elemento</li>"));
}
if (!interval)
  interval = setInterval(animaElementi, durataAnimazioneInMillisecondi);
  
  function animaElementi(){
     if (elementi.length == 0){
       clearInterval(interval);
       interval = null;
       return;
     }
     
     var elemento = elementi.shift();
     elemento.css({"margin-left": "40px", "opacity": 0});
     $("#lista").append(elemento);
     elemento.animate({
       'margin-left': 0,
       'opacity': 1
       }, durataAnimazioneInMillisecondi);
  }
  
};