get active ul li element id by clicking another ul li element
<p>I have two <code>ul</code> elements. On clicking either I want to get both the active <code>li</code> element's class. Right now I am getting only one active <code>li</code> element class by clicking any <code>ul</code> element. </p>

<pre><code>&lt;div class="container secondary-header-tab-container"&gt;
    &lt;ul class="nav nav-tabs header-tabs dashboard-tabs" id="tab-shift" role="tablist"&gt;
        &lt;li role="presentation" class="active"&gt;
            &lt;a href="#" aria-controls="active" role="tab" data-toggle="tab" class="filter active" data-filter=".filterActive" id="active"&gt;Active&lt;/a&gt;
            &lt;p class="active_jobs_count" data-count=""&gt;0&lt;/p&gt;
        &lt;/li&gt;
        &lt;li role="presentation" class=""&gt;
            &lt;a href="#" aria-controls="archived" role="tab" data-toggle="tab" class="filter" data-filter=".filterArchived" id="inactive"&gt;Inactive&lt;/a&gt;
            &lt;p class="active_jobs_count" data-count=""&gt;0&lt;/p&gt;
        &lt;/li&gt;
        &lt;li role="presentation" class=""&gt;
            &lt;a href="#" aria-controls="completed" role="tab" data-toggle="tab" class="filter" data-filter=".filterCompleted" id="closed"&gt;Closed&lt;/a&gt;
            &lt;p class="active_jobs_count" data-count=""&gt;0&lt;/p&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
    &lt;div class="job-card-sort-container pull-right" title="Filter"&gt;
        &lt;div class="btn-group"&gt;
            &lt;button type="button" class="btn btn-default dropdown-toggle active-sort" data-toggle="dropdown"  aria-haspopup="true" aria-expanded="false"&gt;All&lt;/button&gt;
            &lt;div type="button" class="btn btn-default sort-dropdown-icon"&gt;
                &lt;span class="glyphicon glyphicon-filter"&gt;&lt;/span&gt;
                &lt;span class="sr-only"&gt;Toggle Dropdown&lt;/span&gt;
            &lt;/div&gt;
            &lt;ul class="dropdown-menu"&gt;
                &lt;li&gt;&lt;a href="#" class="filter active" data-filter="all"&gt;All&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#" class="filter" data-filter=".normal" &gt;Normal&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#" class="filter" data-filter=".urgent" &gt;Urgent&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#" class="filter" data-filter=".private"&gt;Private&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#" class="filter" data-filter=".shared" &gt;Shared&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<pre class="lang-js prettyprint-override"><code>$(document).on('click', '.dashboard-tabs li, .job-card-sort-container ul li', function() {
    var dataFilter = $('.secondary-header-tab-container').find('.dashboard-tabs li .active').text();
    alert(dataFilter);
    var job_type = $('.secondary-header-tab-container').find('.job-card-sort-container ul li .active').text();
    alert(job_type);
});
</code></pre>