modificato con solo codice javascript
codice HTML:
<!--
Vorrei che nel tag <selection> all'inizio sia visibile solo <option>LIVELLO1</option>
dopo aver fatto il click sul pulsante <input>AVVIA deve partire il countdown se la condizione viene soddisfatta
e allo stesso tempo dare il valore TRUE a <option>LIVELLO1</option>
(nel senso che questa cosa e stata fatta e non deve essere più visibile e ripetuta)
a questo punto deve scomparire il tag <option>LIVELLO1</option>
e visualizzarsi <option>LIVELLO2</option> se viene soddisfatta la condizione si sblocca il pulsante
e si avvia di nuovo il countdown alla pressione e cosi via per altri tag che ora non ci sono tipo LIVELLO3, LIVELLO4 ECC ECC....
-->
<!DOCTYPE html>
<html>
    <head>
        <title>Conto alla rovescia</title>
        <meta charset="utf-8">

        <script>
            function updateTimer(divId,seconds)
            {    
                document.getElementById('avvia').disabled=true;
                elem = document.getElementById(divId);
                elem.style.display = 'none';
                sec = seconds;
                if(seconds < 10) {
                    sec = "0" + seconds;
                }
                document.getElementById('seconds').innerHTML = "00:00:" + sec;

                if (seconds == 0) {
                    document.getElementById('avvia').disabled=false;
                    elem.style.display = 'block';
                } else {
                    var count = seconds - 1;
                    setTimeout("updateTimer('" + divId + "'," + count + ")", 1000);
                }
            }
            // setta conteggio iniziale 
            function setTime(time) {
                document.getElementById('seconds').innerHTML = "00:00:" + parseInt(time);
            }
            // recupero valore select
            function getSelected(select) {
                return select.options[select.selectedIndex].value;
            }
            // recupera l'elemento
            function getId(el) {
                return document.getElementById(el);
            }
            
        </script>
    </head>

    <body>
        <div>
<script>
// Livello1 e di Default FALSE, deve diventare TRUE solo dopo che il processo del primo TAG option va a termine
// e quindi successivamente sbloccare il secondo TAG option
var livello1 = false; 
var cassa = 1000;
var opt1 = 100;
var opt2 = 500;
</script>
            <select name="secondi" id="secondi" onchange="setTime(getSelected(this))">
                <script>
            
                if(cassa >= opt1){
                    cassa = cassa - opt1;
                    document.write('<option value="2">Livello 1</option>');
                    livello1 = true;
                }
                else
                document.write('non ci sono soldi in cassa');
// Livello 1 dopo aver portato a termine il processo deve disabilitarsi e non dovrebbè più essere avviato
// Livello 2 deve essere visibile solo se Livello 1 e stato già avviato e portato a termine
            
                if(cassa >= opt2 && livello1 == true){
                    var cassa = cassa - opt2;
                    document.write('<option value="4">Livello 2</option>');
                }
                else
                document.write('non ci sono soldi in cassa');

                </script>    
            </select>

            <input type="button" id="avvia" onclick="updateTimer('foo',getSelected(getId('secondi')));" value="AVVIA" />

            <h1 id="seconds"></h1>

            <div id="foo" style="display: none;">
                <h1>Conto alla rovescia terminato! Livello successivo sbloccato</h1>
                <h2>Soldi rimanenti in cassa: <script>document.write(cassa)</script></h2>

            </div>
        </div>
    </body>
</html>