jQueryのプログラムがよくわからない

表示されない件はmain.jsの２行目「 (function () {」の$落ちでした。「$ (function () {」に修正して
表示できて、ボタンクリックで「clickが発生しました」が表示できました。

logEvent(event);が２回出てくるので、最初のクリックで１回目の「clickが発生しました'」が表示されて、次のボタンクリックで２個目の「clickが発生しました'」が表示されるのは理解できました。
最初はクラス「.active」が存在しないので、１回目のセレクタは"#button:not(.active)"なんですね。
２回目は１回目で.addClass(active);しているので、セレクタ"#button.active"に対してクリック
が実行されて、２回目のlogEvent(event);が表示されて最後に$(event.target).removeClass("active");で元のindex.htmlに戻している。でいいのでしょうか。
何回も読み直して、理解できたように思えます。