[BorisJe]

<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
			ot.value = +ot.value + +o.value
		})
	})
})
</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='' class='total' />
	</label>
</div>

То что и хотел, а Я могу обратится к Button по ид из Js? И на форме

<input type='' class='total' />

Меняется. А если зайти Inspect то значение остается 0