JSFiddle - React, Tailwind, and code Playground

HTML

<div class="field">
		<span>+7</span> <div class='telephone'></div>
	</div>

	<div class="button">
		<div class="row">
			<span class='cell'>7</span>
			<span class='cell'>8</span>
			<span class='cell'>9</span>
		</div>
	</div>
  
  
  	<span class="cell del">x</span>

CSS

.button{
	width: 310px;
	border: 1px solid;
	margin-top: 30px;
}

.cell{
	border: 1px solid;
	padding: 15px 45px;
	display: inline-block;
}


.telephone{
	display: inline-block;
	border: 1px solid;
	width: 200px;
	height: 20px;
}

JavaScript

var btn = document.querySelector('.button');
var tel = document.querySelector('.telephone');
var del = document.querySelector('.del');

btn.addEventListener('click', function(e){

	var span = document.createElement('span')

	span.innerHTML = e.target.textContent

	tel.appendChild(span)
})


del.addEventListener('click', function(){
	var searchSpan = tel.querySelectorAll('span')

	console.log(searchSpan.length)
	btn.removeChild(searchSpan.length-1) //удалить последний спан
		
})