<div class="list-container" id="listContainer">
  <div class="item active">
    <span>1</span>
    <p>I am Item #1</p>
  </div>
  <div class="item">
    <span>2</span>
    <p>I am Item #2</p>
  </div>
  <div class="item">
    <span>3</span>
    <p>I am Item #3</p>
  </div>
</div>
.item {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 16px;
  color: green;
  cursor: pointer;
}

.item span {
  border: 1px solid green;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.active span {
  background-color: green;
  color: white;
}
.active p {
  font-weight: 600;
}
const listContainer = document.getElementById("listContainer");

const items = listContainer.getElementsByClassName("item");

for (let i = 0; i < items.length; i++) {
  items[i].addEventListener("click", function () {
    let current = listContainer.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");

    this.className += " active";
  });
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.