JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <style>
    div {
      cursor: pointer;
      display: inline-block;
      padding: 10px;
    }
  </style>
</head>

<body>
  <div class="items">
    <div tabindex="-1" class="item"></div>
    <div tabindex="-1" class="item"></div>
    <div tabindex="-1" class="item"></div>
  </div>
  
  <div class="btns">
    <div role="button" tabindex="-1" class="number btn" aria-disabled="true">1</div>
    <div role="button" tabindex="-1" class="number btn" aria-disabled="true">2</div>
    <div role="button" tabindex="-1" class="number btn" aria-disabled="true">3</div> 
  </div>
</body>

</html>

CSS

.item {
  border: 1px solid #ccc;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  vertical-align: middle;
}
.item.selected {
  border-color: blue;
}
.btn {
  border: 1px solid #c4d3ea;
  width: 32px;
  height: 32px;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #e0e9fa;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
[aria-disabled="true"] {
  background-color: #CCC;
  border-color: #ccc;
  cursor: not-allowed;
}

JavaScript

let app = function() {
	this.cellSelected = false
  this.$btns = document.querySelector('.btns');
  this.$items = document.querySelector('.items');
  this.$items.querySelectorAll('.item').forEach(el => {
    el.addEventListener('click', (e) => {
      this.selectCell(e.currentTarget);
      this.checkSelected();
    });
  });
  

  this.$btns.querySelectorAll('.btn').forEach(el => {
    el.addEventListener('click', (e) => {
     	if(this.cellSelected) {
      	this.cellSelected.innerText = e.currentTarget.innerText
      }
    });
  });
}
app.prototype.checkSelected = function(el) {	
  this.$btns.querySelectorAll('.number').forEach(el => {
		if(this.cellSelected) {
    	el.setAttribute('tabindex', 0);
      el.removeAttribute('aria-disabled');
    } else {
    	el.setAttribute('tabindex', -1);
      el.setAttribute('aria-disabled', true);
    }
  });  
}
app.prototype.selectCell = function(el) {
    if(this.cellSelected) {
    	this.cellSelected.setAttribute('tabindex', -1);
      this.cellSelected.classList.remove('selected');
      if(this.cellSelected == el) {
      	this.cellSelected = false;
      	return
      }
    }
		el.classList.add('selected');
  	el.setAttribute('tabindex', 0);
    this.cellSelected = el;
}

new app;