JSFiddle - React, Tailwind, and code Playground

HTML

<div class="event__example-two">
  <div data-price='3600' class="event__two"></div>
   <div data-price='3900' class="event__two"></div>
    <div data-price='1300' class="event__two"></div>
     <div data-price='1890' class="event__two"></div>
</div>  
    <div class="values">0</div>

CSS

.event__example {
      margin-top: 4%;
    display: flex;
    flex-direction: column;
    width: 14%;
}

.events {
  margin: 10px;
}


.event__two {
  width: 100px;
  height: 100px;
  background-color: green;
  margin: 10px;
}

.active {
  background-color: red;
}

JavaScript

var wrapper = document.getElementsByClassName('event__two')
var values = document.getElementsByClassName('values')[0]

function clickwrap() {
  for(var i = 0; i < wrapper.length;i++) {
     wrapper[i].addEventListener('click', listener)
  }
}
clickwrap()

function listener() {
  console.log(this)
  this.classList.toggle('active')
  calcPrice.call(this)
}

function calcPrice() {
		var price = 0;
    
     for(var i = 0; i < wrapper.length;i++) {
        if(wrapper[i].classList.contains('active')) {
          price += parseInt(wrapper[i].getAttribute('data-price'))
        }
      } 
    values.innerHTML = price
}