ASP.NET Multiview с индикатором выполнения

Question

Я пытаюсь использовать эту многошаговую форму с индикатором выполнения, используя jQuery и CSS3 в элементе управления ASP.NET Multiview.

Вот скриншот:

Как вы можете видеть на скриншоте, это работает, но частично.

Нам бы хотелось, чтобы любая панель вида элемента управления Multiview, которая была обработана, изменила цвет на зеленый, а также на число.

Пока что единственная полоса и номер, который меняется на зеленый, это активная полоса.

Как только прогресс переместится на следующую полосу и номер, предыдущая полоса и номер вернутся к синему цвету.

Что мне нужно изменить, чтобы и ранее обработанный бар и номер и активный бар оставались зелеными?

//CSS

        /*form styles*/
#msform {
margin: 50px 135px 50px auto;
text-align: center;
position: relative;
}
#msform fieldset {
background: white;
margin-left:1px !important;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 70px 30px;
box-sizing: border-box;
width: 100% !important;
margin: 0 10%;
/*stacking fieldsets above each other*/
position: absolute;
}  
legend {
    font-weight:bold;
    background: orange;
    width: 100%;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
/*progressbar*/
#progressbar {
    margin-bottom: 10px;
    overflow: hidden;
    /*CSS counters to number the steps*/
    counter-reset: step;
}

    #progressbar li {
    list-style-type: none;
    color: #0093B2;
    text-transform: uppercase;
    font-size: 1.2em;
    width: 20%;
    float: left;
    position: relative;
    }

#progressbar li:before {
    content: counter(step);
    counter-increment: step;
    width: 20px;
    line-height: 20px;
    display: block;
    font-size: 0.625em;
    color: #333;
    background: #0093B2;
    border-radius: 3px;
    margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: #0093B2;
    position: absolute;
    left: -50%;
    top: 9px;
    z-index: -1; /*put it behind the numbers*/
}

#progressbar li:first-child:after {
    /*connector not needed before the first step*/
    content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before, #progressbar li.active:after {
    background: #27AE60;
    color: white;
}


//JS
    <script type="text/javascript">    
        $(document).ready(function () {
            var activeViewIndex = <%=myMultiView.ActiveViewIndex %>;
          $("#progressbar li").each(function(){
              $("#progressbar li").removeClass("active");         
          })
          $("#progressbar li").eq(activeViewIndex).addClass("active");
      })
    </script>

    //MARKUP
    <!-- progressbar -->
    <ul id="progressbar">
        <li>Taxpayer Account Info</li>
        <li>Aircraft Info</li>
        <li>Schedule E</li>
        <li>Review/Sign/Submit</li>
    </ul>

      <asp:MultiView ID="myMultiView" ActiveViewIndex="0" runat="server">
    <asp:View ID="vwPayerInfo" runat="server">
        <h2 style="color: #0093B2; font-weight: bold; width: 1421px;">
        Step 1: Taxpayer Account Info</h2>  
       ---
       ---
    </asp:Multiview>