JSFiddle - React, Tailwind, and code Playground

by Barry Peterson

HTML

<ul>
  <li><span class="num-cats">0</span> Categories Selected</li>
  <li><label for="Revenue"><input type="checkbox" name="Revenue" id="Revenue">Revenue</label></li>
  <li><label for="Blah"><input type="checkbox" name="Blah" id="Blah">Blah</label></li>
  <li><label for="Blabble"><input type="checkbox" name="Blabble" id="Blabble">Blabble</label></li>
  <li><label for="Stuff"><input type="checkbox" name="Stuff" id="Stuff">Stuff</label></li>
  <li><label for="Retail"><input type="checkbox" name="Retail" id="Retail">Retail</label></li>
  <li><label for="Clothes"><input type="checkbox" name="Clothes" id="Clothes">Clothes</label></li>
  <li><label for="Yoga"><input type="checkbox" name="Yoga" id="Yoga">Yoga</label></li>
  <li><label for="Awesome"><input type="checkbox" name="Awesome" id="Awesome">Awesome</label></li>
  <li><label for="Balls"><input type="checkbox" name="Balls" id="Balls">Balls</label></li>
  <li><label for="Revenue2"><input type="checkbox" name="Revenue2" id="Revenue2">Revenue2</label></li>
  <li><label for="Blah2"><input type="checkbox" name="Blah2" id="Blah2">Blah2</label></li>
  <li><label for="Blabble2"><input type="checkbox" name="Blabble2" id="Blabble2">Blabble2</label></li>
  <li><label for="Stuff2"><input type="checkbox" name="Stuff2" id="Stuff2">Stuff2</label></li>
  <li><label for="Retail2"><input type="checkbox" name="Retail2" id="Retail2">Retail2</label></li>
  <li><label for="Clothes2"><input type="checkbox" name="Clothes2" id="Clothes2">Clothes2</label></li>
  <li><label for="Yoga2"><input type="checkbox" name="Yoga2" id="Yoga2">Yoga2</label></li>
  <li><label for="Awesome2"><input type="checkbox" name="Awesome2" id="Awesome2">Awesome2</label></li>
  <li><label for="Balls2"><input type="checkbox" name="Balls2" id="Balls2">Balls2</label></li>
  
</ul>

SCSS

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-family: 'Arial';
  height: 300px;
  overflow-y: scroll;
  border: 1px solid #d0d0d0;
  padding: 20px;
  margin: 20px;
  background-color: #fff;
}

li {
  &:first-child {
    text-align: right;
  }
  
  &:hover {
    background-color: #f4f4f4;
    cursor: pointer;
  }
}

input {
  margin: 10px;
}

label {
  width: 100%;
  display: block;
}

Babel + JSX

const $ul = $('ul');
$ul.find('li').click(() => {
	$ul.find('.num-cats').text($ul.find('input:checked').length)
})