JSFiddle - React, Tailwind, and code Playground

HTML

<div class="containerFixed">loading...</div>
<button id="goLive">click</button>

CSS

.containerFixed {
    position : fixed;
    width : 200px;
    height : 200px;
    background : blue;
    display : none;
    color : #fff;
}

JavaScript

$("#goLive" ).click(function() {
        //This is fadein Spinner only apears at end of upload?

        var subMit = "/echo/json/";

        var i = 0;
        var Data = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
        $.each(Data, function(key, value) {

            $.ajax({
                beforeSend : function () {
                   $(".containerFixed").fadeIn("slow");
                },
                type: 'POST',
                contentType: 'application/json',
                url: subMit,
                async : true,
                dataType: "json",
                data: JSON.stringify(Data[key]),
                success: function(){

                   i++;
                    console.log(i, Data.length);
                   if(i >= Data.length){

                       $('.containerFixed').html("loading complete...").delay(1000).fadeOut("slow");
                       
                   }
                },
                error: function(){
                    i++;
                    console.log(i, Data.length);
                    console.log('Connection Failed');

                    if(i >= Data.length){

                        $('.containerFixed').fadeOut();
                    }

                }

            });
        });
});