jQuery isn’t working because you haven’t loaded it anywhere. The best place to load scripts and stylesheets on Codepen is in the settings for the CSS and JS panels. You can add those assets with ‘quick add’.
One thing to be wary of when using Codepen, is that it is wise to put all your CSS and JS in the separate panels, not mixed in with the HTML. When you have complete control over the code (i.e. you host it yourself) you know what order everything will be loaded - but with Codepen you don’t know what order they will render it all when they compile it. For example, if you include a script tag in a <head> element, and also load script in the JS panel, you don’t necessarily know if they will fire in the correct order. It’s still better practice when you host it yourself to put the css and js separate, but if you don’t, you can still see the order of execution more clearly.