<div class="container"> 
  <ul id="list">
    <p class="title">Choose a 3-Pt Leader</p>
    <li class="inactive" data-id="0">Ray Allen | <span>2973</span></li>
    <li class="inactive" data-id="1">Reggie Miller | <span>2560</span></li>
    <li class="inactive" data-id="2">Jason Terry | <span>2242</span></li>
    <li class="inactive" data-id="3">Paul Pierce | <span>2143</span></li>
    <li class="inactive" data-id="4">Kyle Korver | <span>2097</span></li>
  </ul>
</div>

body {
  font-family: 'Oswald', sans-serif;
  color: #222;
  font-size: 32px;
}

.container {
  max-width: 600px;
  margin: 0 auto;
}

.title {
  border-bottom: 15px solid #cc0000;
  font-weight: 700;
  font-size: 133%;
}

span {
  font-weight: 300;
}

ul {
  list-style: none;
}

ul li {
  margin-bottom: 15px;
  padding: 10px 0 10px 25px;
  cursor: pointer;
}

.active {
  background: #cc0000;
  color: #fff;
  transition: .15s;
}

.inactive {
  background: #efefef;
}

// https://codepen.io/danielwarren/post/frameworkless-events
// Grab ul
const listOfThings = document.getElementById('list')

// Add event listener 
listOfThings.addEventListener("click", function(event) {
  // Grab all the li elements
  let list = document.querySelectorAll('li')
  for (let i = 0; i < list.length; i++) {
    if (event.target.dataset.id === list[i].dataset.id) {
      if (event.target.className === 'inactive') {
        event.target.className = 'active'
      } else {
        event.target.className = 'inactive'
      }
    } else {
      list[i].className = 'inactive'
    }
  }
})

// event.target.dataset.id !== list[i].dataset.id ? 
// list[i].className = 'inactive' : 
// (event.target.className === 'inactive' ? event.target.className = 'active' : event.target.className = 'inactive')