Multiple file uploading get duplicated and repeated

using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace FileUploading.Controllers
{
    public class HomeController : Controller
    {
        
        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
     public JsonResult Upload()
        {
            try
            {
                HttpFileCollectionBase files = Request.Files;

                for (int i = 0; i < files.Count; i++)
                {
                    var newFile = files[i];

                    string time = DateTime.Now.ToString().Replace("/", "_");
                    time = time.Replace(":", "_");

                    string path = Server.MapPath("~/Images/" + time + "_" + newFile.FileName);
                    newFile.SaveAs(path);
                }
                return Json("Uploaded", JsonRequestBehavior.AllowGet);
            }
            catch
            {
                return Json("Failed", JsonRequestBehavior.AllowGet);

            }           
        }

    }
}

@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>
@using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <input type="file" name="file" multiple id="file"/><br />
    
    <div id="all-progress-bars"></div>
    
    <span id="display"></span>
    <button class="btn alert-success" href="javascript:void(0)" id="abc">Upload</button>
}
<script type="text/javascript">
    $("#abc").click(function (e) {
        e.preventDefault();
        var totalCountOfFiles = document.getElementById("file").files.length;
        var formDataToPost = new FormData();
        var str = '';
        for (var i = 0; i < totalCountOfFiles; i++) {
            str += '<div class="progress"><div class="progress-bar pbbb' + i + ' progress-bar-striped active" id="progressBar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%">File ' + (i+1) + '<span class="sr-only"></span></div></div>';
        }
        $('#all-progress-bars').html(str);

        var counter = 1;
        var percentComplete = 0;
        for (var i = 0; i < totalCountOfFiles; i++) {
            var file = document.getElementById("file").files[i];
            formDataToPost.append("file", file);
            $.ajax({
                xhr: function () {
                    var xhr = new window.XMLHttpRequest();
                    //Upload progress
                    xhr.upload.addEventListener("progress", function (evt) {
                        if (evt.lengthComputable) {
                            //alert(counter);
                            percentComplete = evt.loaded / evt.total;
                            $('#all-progress-bars').children('.progress:nth-child('+counter+')').children('div').css('width', percentComplete * 100 + '%')
                            //Do something with upload progress
                            console.log(percentComplete);
                        }
                    }, false);
                                      //Download progress
                                       xhr.addEventListener("progress", function (evt) {
                                           if (evt.lengthComputable) {
                                               var percentComplete = evt.loaded / evt.total;
                                               //Do something with download progress
                                               console.log(percentComplete);
                                           }
                                       }, false);
                                       return xhr;
                 }, 
                type: 'POST',
                url: "@Url.Action("Upload", "Home")",
                data: formDataToPost,
                dataType: 'json',
                contentType: false,
                processData:false,
                success: function (data) {
                    $('#all-progress-bars').children('.progress:nth-child(' + counter + ')').children('div').css('width', '100%')
                    counter++;
                }
                });
              }
        });
    </script>