How do I add an active class to my li element in html css

I have been trying to get an active border when selecting a list item. I cannot get the item to show the CSS background-color. how can I get this to work... then a second question I would have is how would I show an alert of which color selected when clicking the button?

here is the javascript that I am trying to incorporate.

  $(".swatches li").click(function() {
        $(this).addClass('activeColor');
        $(this).removeClass('activeColor');
   });

here is my html

<div class="dropdown-container">
  <ul class="swatches" id="swatches">
    <li class="cell">
      NONE
      <div class="colorBox"></div>
      <!--END COLOR BOX-->
    </li>
    <!--END LI-->
  </ul>
  <!--END SWATCHES-->
</div>
<!--END DROPDOWN CONTAINER-->

<div class="buttonForColor">
  <button>
    Change Color
  </button>
</div><!--END BUTTON FOR COLOR-->

css

.activeColor {
  background-color: red;
}

here is my jsfiddle https://jsfiddle.net/kotten03/02abL9cu/

Any help would be appreciated!