Javascript Iniciando no html / javascript

[soumma]

Sou iniciante em desenvolvimento web e começei a brincar usando algumas funcionalidades com html e o js. Eu tenho uma form e dentro dela eu tenho 6 par de botões, cada par de botão aumenta ou diminui um contador. Eu tenho uma ideia de como fazer mas muito provavelmente não é o mais eficiente então eu queria uma ideia de como fazer essa interação da melhor forma possivel sem usar metodos muito avançados ja que tho iniciando. Segue a estrutura da form com os botões: 

	<br><h3>Atributos <br>Pontos: 15 </h3>
		<input type="hidden" name = 'atb' id="ponto" value= 15>
		<input type="hidden" name = 'atb' id="for" value= 0>
		<input type="hidden" name = 'atb' id="int" value= 0>
		<input type="hidden" name = 'atb' id="hp" value= 0>
		<input type="hidden" name = 'atb' id="mana" value= 0>

		<section id="atb_left">
			<label for="Fplus">FOR: 0</label><br>
		    <input type="button" value="<" id="Fless">
		    <input type="button" value=">" id="Fplus"><br>
			<label for="">INT: 0</label><br>
		    <input type="button" value="<" id="Iless">
		    <input type="button" value=">" id="Iplus">
		</section>
		<section id="atb_center">
			<label for="">HP: 0</label><br>
		    <input type="button" value="<" id="Hless">
		    <input type="button" value=">" id="Hplus"><br>
			<label for="">MANA: 0</label><br>
		    <input type="button" value="<" id="Mless">
		    <input type="button" value=">" id="Mplus">		
		</section>
		<section id="atb_right">
			<label for="">AGI: 0</label><br>
		    <input type="button" value="<" id="Aless">
		    <input type="button" value=">" id="Aplus"><br>
			<label for="">DEF: 0</label><br>
		    <input type="button" value="<" id="Dless">
		    <input type="button" value=">" id="Dplus">		
		</section>