Мобильное меню не закрывается

Есть элемент i при клике на который открывается меню и значек меняется на крестик путем замены класса, так же у элемента меняется id что бы я мог закрыть его.Проблема в том, что Js тупо не хочет закрывать элемент, хотя с открытием проблем нет, так же классы и id меняются.В чем проблема??

//Menu for small devices
    $('#menu-btn-op').click(function(){
    $('.menu-header-menu-container').css('display','block');
    $('#menu-btn-op').attr('class','fa fa-times');
    $('#menu-btn-op').attr('id','menu-btn-cl');
});

$('#menu-btn-cl').click(function(){
    $('.menu-header-menu-container');
    $('#menu-btn-cl').attr('class','fa fa-bars');
    $('#menu-btn-cl').attr('id','menu-btn-op');
});