JQuery Progress bar for multiple buttons

Question

I have multiple ajax requests on my page and for each i want to have different progress bars to be shown till the response.In the code below, "second" progress bars is not shown on the first click, it appears at third. What could be the reason ?

Here you can check jsfiddle: https://jsfiddle.net/narya/zheeuoyu/#&togetherjs=vxl7Hllw5m

and here is the xml file : https://www.dropbox.com/s/0oxkmj8bgt0muma/testAja.xml?dl=0

"TestB.xml" is copy of this file if you need to check, you can just copy&paste. Please consider to use an xml file larger than 400 Kb to be able to observe loading bars. Thanks

Edited Code:23.06.2016 11:15

 <script>
    $(document).ready(function () {
        $("#second").click(function () {
            $.ajax({
                beforeSend: function(){
                    $('#loadCompCountry').css("display", "block");
                },
                complete: function(){
                    $('#loadCompCountry').css("display", "none");
                },
                type: "GET",
                url: "testAja.xml",
                dataType: "xml",
                success: function (xml) {
                    $("#CompCountry").append("<ul></ul>");
                    $(xml).find('CD').each(function () {
                        var cdCountry = $(this).find('COUNTRY').text();
                        var cdComp = $(this).find('COMPANY').text();
                        $("<li></li>").html(cdCountry + ' , ' + cdComp).appendTo("#CompCountry");
                    });
                },
                error: function () {
                    alert("top req ");
                }
            });    
        });

        $("#third").click(function () {
           $.ajax({
               beforeSend: function(){
                   $("#loadTitleArtist").css("display", "block");
               },
               complete: function(){
                   $("#loadTitleArtist").css("display", "none");
               },
                type: "GET",
                url: "testB.xml",
                dataType: "xml",
                success: function (xml) {
                    $("#titleArtist").append("<ul></ul>");
                    $(xml).find('CD').each(function () {
                        var cdTitle = $(this).find('TITLE').text();
                        var cdArtist = $(this).find('ARTIST').text();
                        $("<li></li>").html(cdTitle + ' , ' + cdArtist).appendTo("#titleArtist")
                    });
                },
                error: function () {
                    alert("nonono ");
                }
            });
        });

    });

</script>