<ul>

      <li><a class="facebook"  href="javascript:void(0);"><i class="fa fa-facebook"></i></a></li>

      <li><a class="twitter"  href="javascript:void(0);"><i class="fa fa-twitter"></i></a></li>

          <li><a class="linkedin" href="javascript:void(0);"><i class="fa fa-linkedin"></i></a></li>

      <li><a class="googleplus"  href="javascript:void(0);"><i class="fa fa-google-plus"></i></a></li>

    <li><a class="pinterest" href="javascript:void(0);"><i class="fa fa-pinterest-p"></i></a></li>

    </ul>

and I want to add different background color to different  li like blue for facebook red for google when I click on them but when I click on other li I want them return to their original color kind of like of active class but I want different color or class for each li.

I tried addclass and remove class but I cant figure how to add and remove multiple classes or css properties of li.