JSFiddle - React, Tailwind, and code Playground

by rajnandan1

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="xur">
    
</div>

<div id="xur2">
    
</div>

CSS

p.bad{
  background-color:red;
  margin:10px 0px;
}
p.good{
  background-color:green;
  margin:10px 0px;
}

JavaScript

var as = [1,2,3,4,5];
var as2 = [1,2,3,4,5];
function fromServer(i){
  
	return new Promise((resolve, reject) => {
  		setTimeout(function(){
      		as[i] = as[i]+1;
         resolve(true)
      }, 1000)
  })
}
function fromServer2(i){
   
	return new Promise((resolve, reject) => {
  		setTimeout(function(){
      		as2[i] = as2[i]+1;
         resolve(true)
      }, 1000)
  })
}


async function  forLoopGood(){
	 for(var i=0;i<as.length;i++){
   		await fromServer(i);
      
      $("#xur").append("<p class='good'>"+as[i]+"</p>");
   }
}
function  forLoopBad(){
	 for(var i=0;i<as.length;i++){
   		fromServer2(i);
      
      $("#xur").append("<p class='bad'>"+as[i]+"</p>");
   }
}
forLoopGood();
forLoopBad();