Das ist genau das, was ich meine. Dein JS wird sehr groß und ist fehleranfällig, hat eine riesen Anteil an C&P und wird ein Maintenance-Alptraum. Und im übrigen registrierst du in deinem Quellcode genau wie ich gesagt habe jedes mal einen neuen Handler. $("#option1").click(function() { ... }); ist der erste, $("#option2").click(function() { ... }); der zweite, und mit $("#option11").click(function() { ... }); und entsprechend dem für option12 geht es weiter. Alleine das sind 4 unterschiedliche, jedes mal hard-gecodete Handler.
Ich hab ja auch nicht gesagt, du sollst 1:1 meine Lösung verwenden, sondern dir ein Beispiel gegeben, wie man es generischer lösen könnte. Du denkst einfach stur prozedural und in primitiven Datentypen. Denk objektorientiert und imperativ!
Man könnte z.B. eine Technologie als ein Objekt auffassen. Eine Technologie hat einen Namen, hat Voraussetzungen, die erfüllt sein müssen (also eine Liste an anderen Technologien) und hat dann ggf. noch eine Eigenschaft, ob sie erforscht ist (boolean).
Man kann dann auf zwei Arten weitermachen: Diese Daten in data-* Attributen speichern und das Markup selber schreiben, und das JS die Daten aus den data-* Attributen lesen lassen. Oder man speichert sich diese Daten im JSON-Format ab und lässt sich das Markup gleich vom JS generieren.
Ein anderer Punkt sind deine ganzen kopierten Strings. Man könnte diese Strings einmal generisch fertig machen, z.B. als var x = "Glückwunsch, du hast {0} erforscht" und dann x.replace("[0}", "Speere") um das ganze auszugeben. Das ist eine triviale Änderung, spart die aber viel C&P und erlaubt die a) das Ganze viele infacher zu übersetzen oder b) die Nachricht viel einfacher anzupassen.
Hier ist mal ein anderes Beispiel:
http://jsbin.com/heludibewu/2 (Link zur Source: http://jsbin.com/heludibewu/2/edit).
Wenn du bei einer Technologie den "erforschen" Button drückst, wird entsprechend es bei den Voraussetzungen grün markiert. Du kannst hier natürlich noch beliebige weitere Aktionen machen, wie Nachrichten einblenden oder noch andere Färbungen vornehmen.
Bei dieser Lösung kannst du neue Technologien hinzufügen, indem du einfach das technologies-Array um neue Objekte erweiterst. Das ist eine Möglichkeit, ganz klassisch das open/closed Principle anzuwenden.
Deine Lösung funktioniert natürlich auch, keine Frage. Sie ist nur - nach allen objektiven Kriterien (s.o.)- sehr schlecht. Es ist typischer Code wie man ihn höchstens von einem gerade anfangendem Schler erwarten würde. Erreicht sein ziel, aber wenn du ihn jemals jemandem anderen gibst bringt der dich dafür um 
Meine Lösung ist übrigens keineswegs kanonisch oder das Gelbe vom Ei - sie ist nur eine der vielen Möglichkeiten, sich dem Problem generisch zu nähern, C&P zu vermeiden und den Wartungsaufwand zu verringern. Meine Lösung erlaubt es auch, die Daten ggf. automatisch auszulesen, und sich somit komplett zu sparen, diese manuell einzugeben (was bei 400 Technologien auch viel sein dürfte). Selbst wenn man es manuell eingeben muss spart man sich viel Zeit, da man nur Elemente ins Array packen muss, und sich sonst keine Gedanken mehr machen muss.
tl;dr: Man kann sich viel Arbeit sparen, wenn man Anfangs richtig arbeitet. Objektorientierung hilft
