javascript - List-item not changing style correctly JQuery -

i ask question jquery, i've started use.

i have ol list, , change background , font color of selected list-item (active list item). i've written code :

$('.cart-list ol li').on('click', function() {    $('.active-cart-list').removeclass('active-cart-list');    $(this).addclass('active-cart-list');  });

.cart-list ol li {    margin-top: 1px;    padding: 5px 16px 5px 16px;    font-size: 16px;    font-family: 'lato';    font-weight: bold;    color: #000;    text-transform: uppercase;  }  .cart-list ol li>span {    text-align: left;    margin-left: 28px;  }  .cart-list ol li {    cursor: pointer;  }  .cart-list ol li.active-cart-list {    background-color: #e571c5;    color: #fff;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div class="cart-list">    <ol>      <li class="active-cart-list"><span>lorem1</span>      </li>      <li><span>lorem2</span>      </li>      <li><span>lorem3</span>      </li>      <li><span>lorem4</span>      </li>      <li><span>lorem5</span>      </li>      <li><span>lorem6</span>      </li>      <li><span>lorem7</span>      </li>    </ol>  </div>

list items change color once list scrolled down, can't expect have scroll on every list @ website. pleased help.

cheers

unfortunately, don't think not jquery problem, it's css one.

list bullets/numbers hard change once set...this excellent case css counters.

$('.cart-list ol li').on('click', function() {    $('.active-cart-list').removeclass('active-cart-list');    $(this).addclass('active-cart-list');  });

.cart-list ol li {    margin-top: 1px;    padding: 5px 16px 5px 16px;    font-size: 16px;    font-family: 'lato';    font-weight: bold;    color: #000;    text-transform: uppercase;  }  ol {    counter-reset: numbers;    list-style-type: none;  }  li::before {    counter-increment: numbers;    content: counters(numbers, "")". ";  }  .cart-list ol li>span {    text-align: left;    margin-left: 28px;  }  .cart-list ol li {    cursor: pointer;  }  .cart-list ol li.active-cart-list {    background-color: #e571c5;    color: #fff;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div class="cart-list">    <ol>      <li class="active-cart-list"><span>lorem1</span>      </li>      <li><span>lorem2</span>      </li>      <li><span>lorem3</span>      </li>      <li><span>lorem4</span>      </li>      <li><span>lorem5</span>      </li>      <li><span>lorem6</span>      </li>      <li><span>lorem7</span>      </li>    </ol>  </div>