[ksa]

Вот так будет меняться еще и атрибут...

<style>
.btn {
	margin-bottom: 10px;
}
.btn button + button {
	margin-left: 10px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', _ => {
	document.querySelectorAll('.btn').forEach(_ => {
		const ot = _.parentNode.querySelector('.total')
		_.addEventListener('click', _ => {
			const o = _.target
			if (o.tagName !== 'BUTTON') return
			const val = +ot.value + +o.value
			ot.value = val
			ot.setAttribute('value', val)
		})
	})
})
</script>
<div class='container'>
	<div class='btn'>
		<button value='1'>1</button>
		<button value='2'>2</button>
		<button value='5'>5</button>
		<button value='10'>10</button>
	</div>
	<label>
		Сумма
		<input type='text' class='total' />
	</label>
</div>