Class 'item': conflict between component

[dilfin07]

Hello At the moment, I faced into the following isssue, when using elements on the page where there is logic with a click and an "item" class, If there is one element on the page, it works correctly, if on page have the tab and the dropdown menu does not work, the dropdown does not work, it does not allow you to select an element, use Semantic UI - 2.4.0

due to the fact that the tab and dropdown menus have elements with the item class, they do not work correctly when both are on the same page, how can you use elements to avoid such conflicts?

Thank you use it as follows:

............................
<div class="ui tabular menu">
    <div class="item active" data-tab="tab-name">Check</div>
    <div class="item" data-tab="tab-name2">Country</div>
</div>
...........................
<div class="ui fluid multiple search selection dropdown">
                        <input name="tags" type="hidden" id="selected_country">
                        <i class="dropdown icon"></i>
                        <div class="default text">Country</div>
                        <div class="menu">
                            {% for row in country %}
                            <div class="item" data-value="{{row}}">{{row}}</div>
                            {% endfor %}
                        </div>
                    </div>

<script>
    $('.ui .dropdown')
        .dropdown()
    ;
</script>
<script>
    $('.tabular.menu .item').tab();
</script>