jquery - How can I fix my code and change glyphicon on click for a toggle menu -

i made button , purpose of toggle menu when screen small. have working, when click icon toggle "menu hamburger" expands , shows x instead of menu hamburger, , vice versa. problem comes when click icon fast multiple times in row, can tell toggle doesn't go icon. to, when screen little, show menu icon (it right), , when click it should expand other options icon change x. connect menu , icon icons don't ahead of themselves. feel problem in jquery not sure or how can have these 2 work simultaneously. have toggle button on bootstrap navbar thank you!

jquery(function ($) {     $('#togglebtt').on('click', function () {         $(this).find('span').toggleclass('glyphicon-menu-hamburger').toggleclass('glyphicon-remove');             });         }); 

and below button

<button  id="togglebtt" type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle collapsed">     <span class="glyphic glyphicon-menu-hamburger"></span></button> 

this little longer, should more consistent:

jquery(function ($) {     $('#togglebtt').on('click', function () {        if ($(this).find('span').hasclass('glyphicon-menu-hamburger')) {          $(this).removeclass('glyphicon-menu-hamburger')                 .addclass('glyphicon-remove');        } else {          $(this).removeclass('glyphicon-remove')                 .addclass('glyphicon-menu-hamburger');        }     }); }); 

edit:

also, see fiddle alternate method (fontawesome rather glyphicons): http://jsfiddle.net/arunpjohny/t763p/