JSFiddle - React, Tailwind, and code Playground

by sdgluck

HTML

<div class="industries">
    <h3>Title</h3>
    <div class="widget-Text_Widget">
        <ul>
            <li class="indhandle">
                <span class="sidebar-title">Title</span>
            </li>
        </ul>
    </div>
    <div id="result">Result: <span></span></div>
    <button id="ifTrue">If True</button>
    <button id="ifFalse">If False</button>
</div>

JavaScript

$("#ifTrue").on('click', function () {
    $('#result span').empty();
    var title = $(this).find('h3').text();
    var sidebarindustry = $('.widget-Text_Widget ul').find('.indhandle').find('.sidebar-title').text();
    console.log(title, sidebarindustry);
    var indIteminList = (title !== sidebarindustry); // this is FALSE
    $('#result span').append(indIteminList ? '<li class="indhandle labelsidebar"><span class="sidebar-title">' + title + '</span> <span class="sidebar-item-remove">x</span></li>' : '');
});

$("#ifFalse").on('click', function () {
    $('#result span').empty();
    var title = $(this).find('h3').text();
    var sidebarindustry = $('.widget-Text_Widget ul').find('.indhandle').find('.sidebar-title').text();
    console.log(title, sidebarindustry);
    var indIteminList = (title === sidebarindustry); // this is TRUE
    $('#result span').append(indIteminList ? '<li class="indhandle labelsidebar"><span class="sidebar-title">' + title + '</span> <span class="sidebar-item-remove">x</span></li>' : '');
});