inserir valor numerico em 3 inputs e diminuir valor em outro

Olá turma, beleza?

Tenho bom conhecimento em HTML, CSS, mas não sei fazer coisas dinâmicas com javascript, jquary etc.

Eu estou montando um projeto, estou responsável pelo design e um amigo pela programação.

A página do produto vende em grosso, ao invés de adicionar 1 produto ao carrinho, adiciona 12.

Desses 12, precisa definir os tamanhos das sandálias, são 3 tamanhos disponíveis.

35/36

37/38

39/40

Dai o usuário precisa dizer quantos pares de cada tamanho ele deseja, precisa fechar em 12.

Montei o HTML com bootstrap, ficou assim:

O usuário insere a quantidade e o campo QNT DISPONIVEL subtrai o valor do 12, exemplo:

QNT DISPONIVEL: 9

35/36 = 3

37/38 =

39/40 =

QNT DISPONIVEL: 4

35/36 = 3

37/38 = 5

39/40 =

QNT DISPONIVEL: 0

35/36 = 3

37/38 = 5

39/40 = 4

E se não for pedir demais, alguma limitação para o usuário não poder inserir um valor maior que o permitido. Algum ninja do javascript ou outra linguagem consegue me dar uma dica sobre isso? Realmente não sei javascript.

Segue o código que estou utilizando:

 <div class="form-contato">
 <form action="" method="post" name="formcontato" onSubmit="return validar();" class="form-horizontal">
 <script language="JavaScript" src="javascripts/cadastro.js" type="text/javascript"></script>

 <div class="form-group">
 <label for="inputEmail3" class="col-sm-3 control-label" style="font-family: Lato, sans-serif!important;">QNT. DISPONÍVEL</label>
 <div class="col-sm-9">
 <input type="number" class="form-control" id="cad_nome2" value="12" name="cad_nome" size="2" disabled>
 </div>
 </div>
 <div class="form-group">
 <label for="inputEmail3" class="col-sm-3 control-label" style="font-family: Lato, sans-serif!important;">Tamanho 35/36</label>
 <div class="col-sm-9">
 <input type="number" class="form-control" id="cad_sobrenome" name="cad_sobrenome" size="2" placeholder="Informe a quantidade...">
 </div>
 </div>
 <div class="form-group">
 <label for="inputEmail3" class="col-sm-3 control-label" style="font-family: Lato, sans-serif!important;">Tamanho 37/38</label>
 <div class="col-sm-9">
 <input type="number" class="form-control" id="cad_sobrenome" name="cad_sobrenome" size="2" placeholder="Informe a quantidade...">
 </div>
 </div>
 <div class="form-group">
 <label for="inputEmail3" class="col-sm-3 control-label" style="font-family: Lato, sans-serif!important;">Tamanho 39/40</label>
 <div class="col-sm-9">
 <input type="number" class="form-control" id="cad_sobrenome" name="cad_sobrenome" size="2" placeholder="Informe a quantidade...">
 </div>
 </div>

 </form>

	<br><br>
	<div class="btn-group">
 <div class="adicionar-ao-carrinho">
 {botao}
 </div>
	</div>
</div>

	 

	Gratidão!!!