<div id="parent">
  <span class="badge bg-danger" style="cursor: pointer;">150</span>
  <span class="badge bg-danger" style="cursor: pointer;">250</span>
  <span class="badge bg-danger" style="cursor: pointer;">350</span>
  <span class="badge bg-danger" style="cursor: pointer;">450</span>
</div>

.bg-danger {
  background: red;
}
.bg-success {
  background: green;
}

$('#parent').on('click', 'span', ({currentTarget}) => {
  (new Span($(currentTarget))).switch()
})

const Span = class {
  constructor(target) {
    this.target = target
  }
  get data() {
    return !this.target.data().click ? this.defaultData() : this.target.data().click
  }
  get remove() {
    return this.data.state ? 'bg-danger' : 'bg-success'
  }
  get add() {
    return this.data.state ? 'bg-success' : 'bg-danger'
  }
  get text() {
    const value = Number(this.data.value)
    return this.data.state ? value + 50 : value
  }
  switch() {
    this.data.state = !this.data.state
    this.target.addClass(this.add).removeClass(this.remove).text(this.text)
    return this
  }
  defaultData() {
    this.target.data().click = {state: false, value: this.target.text()}
    return this.data
  }
}