javascript - How to add this element in jquery -

i making program in need multiple accordion menu more 100 first work properly. know can solved selector in jquery new in jquery have no idea how add element.

accordion menu copied internet in 1 menu opened other become inactive(closed). in case topmost menu working not other

my coding html

<div id='cssmenu'> <ul>     <li class='has-sub'><a href='#'><span>products</span></a>       <ul>          <li><a href='#'><span>product 1</span></a></li>          <li><a href='#'><span>product 2</span></a></li>          <li class='last'><a href='#'><span>product 3</span></a></li>       </ul>    </li>    <li class='has-sub'><a href='#'><span>about</span></a>       <ul>          <li><a href='#'><span>company</span></a></li>        </ul>    </li>  </ul>   </div> <br><br> <div id='cssmenu'> <ul>     <li class='has-sub'><a href='#'><span>products</span></a>       <ul>          <li><a href='#'><span>product 1</span></a></li>          <li><a href='#'><span>product 2</span></a></li>          <li class='last'><a href='#'><span>product 3</span></a></li>       </ul>    </li>    <li class='has-sub'><a href='#'><span>about</span></a>       <ul>          <li><a href='#'><span>company</span></a></li>        </ul>    </li>  </ul>   </div>     <br><br> <div id='cssmenu'> <ul>     <li class='has-sub'><a href='#'><span>products</span></a>       <ul>          <li><a href='#'><span>product 1</span></a></li>          <li><a href='#'><span>product 2</span></a></li>          <li class='last'><a href='#'><span>product 3</span></a></li>       </ul>    </li>    <li class='has-sub'><a href='#'><span>about</span></a>       <ul>          <li><a href='#'><span>company</span></a></li>        </ul>    </li>  </ul>   </div> 

css:

@import url(http://fonts.googleapis.com/css?family=lato); @charset "utf-8"; /* base styles */ #cssmenu, #cssmenu ul, #cssmenu li, #cssmenu {   margin: 0;   padding: 0;   border: 0;   list-style: none;   font-weight: normal;   text-decoration: none;   line-height: 1;   font-family: 'lato', sans-serif;   font-size: 14px;   position: relative; } #cssmenu {   line-height: 1.3;   padding: 6px 15px; } #cssmenu {   width: 200px; } #cssmenu > ul > li {   cursor: pointer;   background: #000;   border-bottom: 1px solid #4c4e53; } #cssmenu > ul > li:last-child {   border-bottom: 1px solid #3e3d3c; } #cssmenu > ul > li > {   font-size: 13px;   display: block;   color: #ffffff;   text-shadow: 0 1px 1px #000;   background: #64676e;   background: -moz-linear-gradient(#64676e 0%, #4c4e53 100%);   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #64676e), color-stop(100%, #4c4e53));   background: -webkit-linear-gradient(#64676e 0%, #4c4e53 100%);   background: linear-gradient(#64676e 0%, #4c4e53 100%); } #cssmenu > ul > li > a:hover {   text-decoration: none; } #cssmenu > ul > li.active {   border-bottom: none; } #cssmenu > ul > li.active > {   background: #97c700;   background: -moz-linear-gradient(#97c700 0%, #709400 100%);   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #97c700), color-stop(100%, #709400));   background: -webkit-linear-gradient(#97c700 0%, #709400 100%);   background: linear-gradient(#97c700 0%, #709400 100%);   color: #4e5800;   text-shadow: 0 1px 1px #709400; } #cssmenu > ul > li.has-sub > a:after {   content: "";   position: absolute;   top: 10px;   right: 10px;   border: 5px solid transparent;   border-left: 5px solid #ffffff; } #cssmenu > ul > li.has-sub.active > a:after {   right: 14px;   top: 12px;   border: 5px solid transparent;   border-top: 5px solid #4e5800; } /* sub menu */ #cssmenu ul ul {   padding: 0;   display: none; } #cssmenu ul ul {   background: #efefef;   display: block;   color: #797979;   font-size: 13px; } #cssmenu ul ul li {   border-bottom: 1px solid #c9c9c9; } #cssmenu ul ul li.odd {   background: #e5e5e5; } #cssmenu ul ul li:last-child {   border: none; } 

jquery

( function( $ ) { $( document ).ready(function() { $('#cssmenu ul ul li:odd').addclass('odd'); $('#cssmenu ul ul li:even').addclass('even'); $('#cssmenu > ul > li > a').click(function() {   $('#cssmenu li').removeclass('active');   $(this).closest('li').addclass('active');    var checkelement = $(this).next();   if((checkelement.is('ul')) && (checkelement.is(':visible'))) {     $(this).closest('li').removeclass('active');     checkelement.slideup('normal');   }   if((checkelement.is('ul')) && (!checkelement.is(':visible'))) {     $('#cssmenu ul ul:visible').slideup('normal');     checkelement.slidedown('normal');   }   if($(this).closest('li').find('ul').children().length == 0) {     return true;   } else {     return false;      }      }); }); } )( jquery ); 

js fiddle https://jsfiddle.net/ru5l5clg/

instead of $('#cssmenu li').removeclass('active');, use $(this).closest('#cssmenu').find('li').removeclass('active');

similarly instead of $('#cssmenu ul ul:visible').slideup('normal');, use $(this).closest('#cssmenu').find('ul ul:visible').slideup('normal');

by using 1 accordion menu not interfere other one

(function ($) {     $(document).ready(function () {         $('#cssmenu ul ul li:odd').addclass('odd');         $('#cssmenu ul ul li:even').addclass('even');         $('#cssmenu > ul > li > a').click(function () {             $(this).closest('#cssmenu').find('li').removeclass('active');             $(this).closest('li').addclass('active');             var checkelement = $(this).next();             if ((checkelement.is('ul')) && (checkelement.is(':visible'))) {                 $(this).closest('li').removeclass('active');                 checkelement.slideup('normal');             }             if ((checkelement.is('ul')) && (!checkelement.is(':visible'))) {                 $(this).closest('#cssmenu').find('ul ul:visible').slideup('normal');                 checkelement.slidedown('normal');             }             if ($(this).closest('li').find('ul').children().length == 0) {                 return true;             } else {                 return false;             }         });     }); })(jquery); 

jsfiddle