WordPressサイトにフォームを作成しているのですがこちら（https://www.seleqt.net/programming/open-source-css-javascript-select-box-snippets/）
のページを参考にして選択項目をカスタマイズしようとしているのですがjQueryが上手くできません。
もう2日もこれにハマってしまいどうしていいのかわからないためどなたか分かる方がいらっしゃいましたら教えてください。
これを作りたいです。
＜環境＞
MacOS Catarina
WordPress使用
作りたいのは上記サイトの２番目のタイプです。特にエラーが出るわけではなく、読み込みも確認していますがちゃんと読み込めていました。原因がなんなのかお手上げです。
一応コード載せておきます。
＜HTML＞
<divclass="container"><spanclass="choose">ChooseGender</span>
<div class="dropdown">
<div class="select">
<span>Select Gender</span><iclass="fa fa-chevron-left"></i>
</div><inputtype="hidden"name="gender"><ulclass="dropdown-menu"><liid="male">Male</li>
<li id="female">Female</li></ul>
</div><spanclass="msg"></span>
</div>＜CSS＞
*{outline: 0;font-family: sans-serif}body{background-color: #fafafa}span.msg,span.choose{color: #555;padding: 5px010px;display: inherit}.container{width: 500px;margin: 50pxauto0;text-align: center}/*Styling Selectbox*/.dropdown{width: 300px;display: inline-block;background-color: #fff;border-radius: 5px;box-shadow: 002pxrgb(204,204,204);transition: all.5sease;position: relative;font-size: 14px;color: #474747;height: 100%;text-align: left}.dropdown.select{cursor: pointer;display: block;padding: 10px}.dropdown.select>i{font-size: 13px;color: #888;cursor: pointer;transition: all.3sease-in-out;float: right;line-height: 20px}.dropdown:hover{box-shadow: 004pxrgb(204,204,204)}.dropdown:active{background-color: #f8f8f8}.dropdown.active:hover,.dropdown.active{box-shadow: 004pxrgb(204,204,204);border-radius: 5px5px00;background-color: #f8f8f8}.dropdown.active.select>i{transform: rotate(-90deg)}.dropdown.dropdown-menu{position: absolute;background-color: #fff;width: 100%;left: 0;margin-top: 1px;box-shadow: 01px2pxrgb(204,204,204);border-radius: 01px5px5px;overflow: hidden;display: none;max-height: 144px;overflow-y: auto;z-index: 9}.dropdown.dropdown-menuli{padding: 10px;transition: all.2sease-in-out;cursor: pointer}.dropdown.dropdown-menu{padding: 0;list-style: none}.dropdown.dropdown-menuli:hover{background-color: #f2f2f2}.dropdown.dropdown-menuli:active{background-color: #e2e2e2}jsファイル
/*Dropdown Menu*/$('.dropdown').click(function(){$(this).attr('tabindex',1).focus();$(this).toggleClass('active');$(this).find('.dropdown-menu').slideToggle(300);});$('.dropdown').focusout(function(){$(this).removeClass('active');$(this).find('.dropdown-menu').slideUp(300);});$('.dropdown .dropdown-menu li').click(function(){$(this).parents('.dropdown').find('span').text($(this).text());$(this).parents('.dropdown').find('input').attr('value',$(this).attr('id'));});/*End Dropdown Menu*/$('.dropdown-menu li').click(function(){varinput='<strong>'+$(this).parents('.dropdown').find('input').val()+'</strong>',msg='<span class="msg">Hidden input value: ';$('.msg').html(msg+input+'</span>');});