JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div id="cards">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
  
  <button onclick="addCard()">
    Add Card
  </button>
  
  <script>
    function addCard() {
      var base = document.getElementById('cards');
      var el = document.createElement('div');
      el.classList.add('card');
      base.appendChild(el);
    }
  </script>
</body>

CSS

.card {
  background-color: red;
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 10px;
}

.blue {
  background-color: blue;
}

JavaScript

var base = document.getElementById('cards');
var selector = '.card';


base.addEventListener('click', function(event) {
	if (event.target.matches(selector)) {
  	event.target.classList.add('blue');
  }
});