JSFiddle - React, Tailwind, and code Playground

HTML

<div id='console'></div>

<div class="passengers-list dropdown-box active">
	<div class="lists-content">
		<div class="list-item">
			<span class="list-name" data-description="Старше 12 лет">Взрослые</span>
			<div class="numeric-selector">
				<a class="minus"><i class="material-icons" data-decrement="adults">remove</i></a>
				<input id="adult-counter" type="text" class="numeric-input">
				<a class="plus"><i class="material-icons" data-increment="adults">add</i></a>
			</div>
		</div>
		<div class="list-item">
			<span class="list-name" data-description="От 2 до 12 лет">Подростки</span>
			<div class="numeric-selector">
				<a class="minus"><i class="material-icons" data-decrement="teens">remove</i></a>
				<input id="teen-counter" type="text" class="numeric-input">
				<a class="plus"><i class="material-icons" data-increment="teens">add</i></a>
			</div>
		</div>
		<div class="list-item">
			<span class="list-name" data-description="До 2 лет">Младенцы</span>
			<div class="numeric-selector">
				<a class="minus"><i class="material-icons" data-decrement="kids">remove</i></a>
				<input id="kid-counter" type="text" class="numeric-input">
				<a class="plus"><i class="material-icons" data-increment="kids">add</i></a>
			</div>
		</div>
	</div>
</div>

CSS

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
.passengers-list {
    font-family: 'Open Sans', sans-serif;
    z-index: -1;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 20px;
    left: 20px;
    width: 50%;
    margin: 0 auto;
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.04);
    border-radius: 0 0 4px 4px;
    transition: opacity .25s, visibility .25s, transform .25s;
    transform: translateY(-20px);
}
.passengers-list.active {
    z-index: 10;
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}
.passengers-list .lists-content {
    position: relative;
    overflow: hidden;
    z-index: 12;
    background: #fff;
    padding: 18px;
    border-radius: 0 0 4px 4px;
}
.passengers-list .lists-content > .list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0 0 12px;
}
.passengers-list .lists-content > .list-item > .list-name {
    position: relative;
    font-size: 0.825rem;
    text-align: left;
}
.passengers-list .lists-content > .list-item > .list-name:after {
    position: relative;
    content: attr(data-description);
    font-size: 0.6rem;
    display: block;
    color: #9e9e9e;
}
.passengers-list .lists-content > .list-item > .numeric-selector {
    position: relative;
    font-size: 0;
    padding: 2px 0;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.passengers-list .lists-content > .list-item > .numeric-selector a {
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: 24px;
    height: 26px;
    -webkit-transition: all .25s;
    transition: all .25s;
}
.passengers-list .lists-content > .list-item > .numeric-selector a.minus {
    border-radius: 2px 0 0 2px;
    border: 1px solid rgba(224, 224, 224, 0.5);
    color: #ef9a9a;
}
.passengers-list .lists-content > .list-item >...

JavaScript

class Dashboard {
	constructor(initial) {
  	[this.adults, this.teens, this.kids] = initial
    this.total = initial.reduce((sum, el) => {
    	return sum + el
    }, 0)
    
    if (initial > 9) throw new Error('Инициализация с недопустимыми параметрами')
  }
  
  increment(key) {
    if (this.total < 9) {
    	if (key === "kids") {
      	if (this.kids < this.adults) {
        	++this[key]
      		++this.total
        }
      } else {
        ++this[key]
      	++this.total
      }
			this.render()
    }
  }
  
  decrement(key) {
      if (((key !== 'adults') && this[key] > 0)) {
        --this[key] 
        --this.total
        this.render()
      }
      if ((key === 'adults') && this[key] > 1 && this.adults > this.kids)  {
        --this[key] 
        --this.total
        this.render()
      }
  }
  
  render() {
  	document.getElementById('adult-counter').value = this.adults
    document.getElementById('teen-counter').value = this.teens
    document.getElementById('kid-counter').value = this.kids
  }
}

(initial => {
	let ticketsPanel = new Dashboard(initial)

  document.querySelector("i[data-increment='adults']").addEventListener('click', () => {
  	ticketsPanel.increment('adults')
  })
  document.querySelector("i[data-decrement='adults']").addEventListener('click', () => {
  	ticketsPanel.decrement('adults')
  })
  document.querySelector("i[data-increment='teens']").addEventListener('click', () => {
  	ticketsPanel.increment('teens')
  })
  document.querySelector("i[data-decrement='teens']").addEventListener('click', () => {
  	ticketsPanel.decrement('teens')
  })
  document.querySelector("i[data-increment='kids']").addEventListener('click', () => {
  	ticketsPanel.increment('kids')
  })
  document.querySelector("i[data-decrement='kids']").addEventListener('click', () => {
  	ticketsPanel.decrement('kids')
  })
  
  ticketsPanel.render()
})([2, 1, 1])