JSFiddle - React, Tailwind, and code Playground

by Lokesh Yadav

HTML

<div class="filters ng-scope full-dna-search" ng-class="{'full-dna-search':fullDnaSearch}" ng-controller="FiltersCtrl">
    <div class="filter-container r1">
        <div class="filter-label basic-search">Basic Search</div>

        <div class="dropdown ng-isolate-scope" dropdown="" name="cityDropdown.name" items="cityDropdown.items" category="cityDropdown.category">
            <div class="filter-button" ng-click="toggleMenu()">
                <span class="text ng-binding">City</span><i class="fa fa-chevron-down"></i>
            </div>
            <div class="dd_arrow filter ng-hide" ng-show="menuVisible"></div>
            <div class="dropdown-directive-menu ng-hide" ng-show="menuVisible">
                <a class="clear-btn" ng-click="clearAllItems(); $event.stopPropagation();"><span ng-show="hasFilteredItems" class="ng-hide">Clear all</span></a>
                <form name="dropdown_form" class="ng-pristine ng-valid">

                </form>
            </div>
        </div>

        <div class="dropdown ng-isolate-scope" dropdown="" name="industryDropdown.name" items="industryDropdown.items" category="industryDropdown.category">
            <div class="filter-button" ng-click="toggleMenu()">
                <span class="text ng-binding">Industry</span><i class="fa fa-chevron-down"></i>
            </div>
            <div class="dd_arrow filter ng-hide" ng-show="menuVisible"></div>
            <div class="dropdown-directive-menu ng-hide" ng-show="menuVisible">
                <a class="clear-btn" ng-click="clearAllItems(); $event.stopPropagation();"><span ng-show="hasFilteredItems" class="ng-hide">Clear all</span></a>
                <form name="dropdown_form" class="ng-pristine ng-valid">
                    <div ng-repeat="i in items" class="ng-scope">
                        <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleItem($index); $event.stopPropagation();">
                            <input type="checkbox"...

JavaScript

$(document).ready(function () {
    // This console.log() statement returns the correct DOM element
    console.log($('#direct-apply-btn'));

    // As does this one:
    console.log($('[data-toggle="popover-filter"]'));

    var popoverTextFilter = "Some text here.";
    var popoverTextButton = "Some other text here.";

    $('[data-toggle="popover-filter"]').popover({
        delay: {show: "500", hide: "100"},
        content: popoverTextFilter,
        trigger: "hover",
        placement: "top"
    });

    $('[data-toggle="popover-btn"]').popover({
        delay: {show: "500", hide: "100"},
        content: popoverTextButton,
        trigger: "hover",
        placement: "top"
    });

    if(location.hash.includes('direct_apply')) {
        $('.direct-apply-filter').addClass('direct-apply-btn-active');
        $('.direct-apply-text').addClass('direct-apply-btn-active');
    }

    $('#direct-apply-btn').click(function() {
        $('.direct-apply-filter').toggleClass('direct-apply-btn-active');
        $('.direct-apply-text').toggleClass('direct-apply-btn-active');
    });

    $('.clear-filters-btn').click(function(){
        $('.direct-apply-filter').removeClass('direct-apply-btn-active');
        $('.direct-apply-text').removeClass('direct-apply-btn-active');
    });

    $('.header').click(function(){
        $(this).css('background','red');
    });
});