click event is not working. For few elements it is for few its not

In my code for cmd and normal its working, but for #aboutme its not. Don't know why such event is getting ignored while its working for the above snippet.

var normal = $(".normal");
var cmd = $(".cmd");
normal.on("click", function(){
  $(".UI").show();

  $(".console").hide();
});
cmd.on("click", function(){
  $(".console").show();
  
  $(".UI").hide();
});


$("#aboutme").on("click",function(){
console.log("okay");
});

My Html Code: class dashboard acts as a wrapper.

<div class="dashboard ">
            <div class="option">
                <div class="normal">Normal</div>
                <div class="cmd">Terminal</div>
            </div>   
            <hr style="background-color: white;">
            
                <div class="console">
                    </div>
                        
                <div class="UI ">
                    <div class="showcase">
                            <div id="aboutme">
                            <h2><span>&raquo;About</span></h2>
                            <p>Self-motivated fresher seeking a career in recognized organization to prove my skills and utilize my knowledge and intelligence in the growth of organization.</p>
                            </div>
                            <div id="Skills">
                            <h2><span>Skills</span></h2>
                            <p> <kbd>Programming Languages</kbd>         :    Python, Node.js, C++</p>
                               <p> <kbd>Platform & Development Tools</kbd>   :    VS Code , Spyder and Jupiter Notebook</p> 
                           
                           
                          
                    </div>
                </div>
            </div>