jquery - query add .css if div has active class

Question

I have trouble with this jquery code:

jQuery(document).ready(function($) {
    if ($('#left-menu').hasClass('active')){
        console.log(true);
        $("#submenu").css("display", "block");
    };
});

With this function I need to add .css display block to submenu

<ul>
    <li>
        <a class="active" id="left-menu">Test</a>
        <ul style="display: none" id="submenu">
            <li>test</li>
            <li>test</li>
        <ul>
    </li>
    <li>
        <a id="left-menu">Test 2 </a>
        <ul style="display: none" id="submenu">
            <li>test</li>
            <li>test</li>
        <ul>
    </li>
</ul>

And now I will describe where is problem. When is active first link everything is ok and jquery add .css display: block. But when is active second link jquery do not add .css display: block.

Can you someone help me? Thank you.

Answer 1

IDs must be unique, so use instead: (and close all UL tags)

<ul>
    <li>
        <a class="left-menu">Test</a>
        <ul style="display: none" class="submenu">
            <li>test</li>
            <li>test</li>
        </ul>
    </li>
    <li>
        <a class="left-menu active">Test 2 </a>
        <ul style="display: none" class="submenu">
            <li>test</li>
            <li>test</li>
        </ul>
    </li>
</ul>

And then:

jQuery(document).ready(function($) {    
        $(".left-menu.active").next('.submenu').show();
});

BTW, you could use: $(".left-menu.active").next('.submenu').show();

SEE DEMO