```
<html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <script>
            $(document).ready(function(){

                var counter = 0;
                $("#play-bt").click(function(){
                    $(".audio-player")[counter].play();
                    $("#message").text("Music started");
                })

                $("#pause-bt").click(function(){
                    $(".audio-player")[counter].pause();
                    $("#message").text("Music paused");
                })

                $("#stop-bt").click(function(){
                    $(".audio-player")[counter].pause();
                    $(".audio-player")[counter].currentTime = 0;
                    $("#message").text("Music Stopped");
                })

                $("#next-bt").click(function(){
                    $(".audio-player")[counter].pause();
                    $(".audio-player")[counter].currentTime = 0;
                    counter++;
                    $(".audio-player")[counter].play();
                    $("#message").text("Music started");
                })

                $("#prev-bt").click(function(){
                    $(".audio-player")[counter].pause();
                    $(".audio-player")[counter].currentTime = 0;
                    counter--;
                    $(".audio-player")[counter].play();
                    $("#message").text("Music started");
                })

                $(".audio-player").bind('timeupdate', function(){

                    var track_length = $(".audio-player")[counter].duration;
                     var secs = $(".audio-player")[counter].currentTime;
                    var progress = (secs/track_length) * 100;

                     $('#progress').css({'width' : progress * 2});

                    var tcMins = parseInt(secs/60);
                    var tcSecs = parseInt(secs - (tcMins * 60));

                    if (tcSecs < 10) { tcSecs = '0' + tcSecs; }

                    // Display the time
                    $('#timecode').html(tcMins + ':' + tcSecs);
                })

            })
        </script>
            <style>

            </style>
    </head>
<body>
            <div class = "div.jp-audio"><audio class ="audio-player"  name= "audio-player" src="01-Breakin-A-Sweat-Zedd-Remix.mp3" ></audio></div>
            <div class = "div.jp-audio"><audio class ="audio-player" name= "audio-player" src="01-hard_rock_sofa-quasar.mp3" ></audio></div>
            <div id="message"></div>
            <div id = "playerContainer">
                <ul id = "playerControls">
                    <li><a id="play-bt" href="#">Play music</a></li> <li> <a id="pause-bt" href="#">Pause music</a></li> 
                    <li><a id="stop-bt" href="#">Stop music</a></li>  <li><a id = "next-bt" href ="#">Next Track</a></li> 
                    <li><a id = "prev-bt" href ="#">Previous Track</a></li>
                </ul>

                <span id="timecode"></span>
                 <span id="progressContainer">
                   <span id="timecode"></span>
                   <span id="progress"></span>
                 </span>
            </div>
    </body>
</html>

```

Everything works well. the code does do what it is needed but apparently the progress bar is not working and showing why is that? I checked my console but it doesn't show any error. how can Show the progress bar of the song that is currently playing?