JSFiddle - React, Tailwind, and code Playground

HTML

<div id="input">1-28+5</div>
<div class="button" id="del">REMOVE</div>
<div></div>
<div class="button button_add">+</div>
<div class="button button_add">-</div>
<div class="button button_add">*</div>
<div class="button button_add">/</div>
<div></div>
<div class="button button_add">0</div>
<div class="button button_add">1</div>
<div class="button button_add">2</div>
<div class="button button_add">3</div>
<div class="button button_add">4</div>
<div class="button button_add">5</div>
<div class="button button_add">6</div>
<div class="button button_add">7</div>
<div class="button button_add">8</div>
<div class="button button_add">9</div>

CSS

#input {
  background-color: #ccc;
  border: 1px solid gray;
  padding: 5px;
  margin: 5px;
}

.button {
  background-color: #eee;
  border: 1px solid gray;
  border-radius: 5px;
  padding: 5px 10px;
  margin: 5px;
  display: inline-block;
}

JavaScript

let input = document.getElementById('input');
let del = document.getElementById('del');
let buttons = document.getElementsByClassName('button_add');

del.addEventListener('click', (e) => {
	input.innerText = input.innerText.slice(0, -1);
})

//
for (var i = 0; i < buttons.length; i++) {
	buttons[i].addEventListener('click', (e) => {
		let symbol = e.target.innerText;
		input.innerText += symbol;
	});
}