Obliczenia wartości z formularza na żywo

Witam! Piszę prostą aplikację, taki kalkulator do obliczania kosztów dla wartości wprowadzonych z formularza, niestety nie do końca wiem jak zapisać to co mam w głowie :)

Generalnie mam 4 problemy z którymi głowię się już od dłuższego czasu. Napisałem taki o to kod: http://codepen.io/anon/pen/XJxwrm

function kalkulator() {

  // stałe wartości/koszt
	var zolDrewno = 50;
	var zolGlina = 10;
	var zolZelazo = 25;

	var zolnierz = document.getElementById("zolnierz").value; // pobranie wartości "ilość" z input przez usera
	
	var zolIlosc = zolnierz; // ilość żołnierzy == ilość podana przez usera
  
  // obliczanie wartości materiałów dla żołnierza
	var zolDrewno = zolDrewno * parseInt(zolnierz);
	var zolGlina = zolGlina * parseInt(zolnierz);
	var zolZelazo = zolZelazo * parseInt(zolnierz);

  // wypisanie do tabeli wyliczonych wartości
	document.getElementById("zolIlosc").innerHTML = zolIlosc;
	document.getElementById("zolDrewno").innerHTML = zolDrewno;
	document.getElementById("zolGlina").innerHTML = zolGlina;
	document.getElementById("zolZelazo").innerHTML = zolZelazo;
  
  // .. jak to poprawić?
}

Generalnie programik działa na zasadzie, że user wprowadza ilość żołnierzy do inputa, klika magiczny przycisk oblicz no i dostaje zestawienie kosztów :) Zacznę od problemów

Problem #1: Jak schować drugą tabelkę i pokazać ją tylko wtedy, gdy user kliknie przycisk Oblicz?

Problem #2: Jak sprawić, że przycisk Reset zresetuje wartości (resetuje tylko input) oraz schowa drugą tabelkę?

Problem #3: Czy można pozbyć się przycisków Oblicz i Reset zrobić tak, że program w locie, na żywo obliczy zestawienie po wpisaniu wartości w input i tym samym pokaże się druga tabelka? Po skasowaniu wartości tabelka znika.

Problem #4 Bardziej ogólny, ale jednak przy powiększaniu skryptu ważny. Co zrobić, gdy będę chciał dodać Żołnierz2, który będzie miał inne wartości dla: drewno, glina, żelazo? Dodawać znowu kolejne zmienne np. zol2Drewno = 100; czy jest na to inny sposób? Oczywiście w takim przypadku w zestawieniu byłyby pokazywany kolejny wiersz dla Żołnierz 2.

To tyle moi drodzy, mam nadzieję że wspomożecie początkującego :P

Nikt nie pomoże? :(

1. Nadaj atrybut id tagowi div w którym się owa tabelka znajduje oraz atrybut style i w nim ustaw display na wartość "none".
   Do funkcji kalkulator() dodaj

document.getElementById("id_div_tabelki_2").style='display: block;';

Efekt: po kliknięciu w "Oblicz" i obliczeniu pojawia się tabelka :)

2. Funkcja reset:

function reset() {
document.getElementById("zolnierz").value='0'; // Nadaje wartość 0
document.getElementById("id_div_tabelki_2").style='display: none;'; // Ukrywa tabelkę wyników
}

3 & 4: Poczytaj o JS :)

dodanie znaczników <code class="javascript"> - @furious programming

Ok, dzięki wielkie.