JSFiddle - React, Tailwind, and code Playground

by Steven Senkus

HTML

<ul id="removeList"></ul>
<ul id="removeRefactorList"></ul>

CSS

.one {
    background-color: #ff0;
}
.two {
    background-color: #f70;
}
.three {
    background-color: #f00;
}
.four {
    background-color: #070;
}

JavaScript

var count = 0;

var remove = function (posting) {
    if (posting.isDetailsVisible) {
        if (posting.isInEditMode) {
            if (posting.meetsFilterCriteria) {
                $('#removeList').append('<li class="one">' + (count) + ' - ' + JSON.stringify(posting) + '</li>');
                //    posting.isDetailsVisible = false;
            } else {
                $('#removeList').append('<li class="two">' + (count) + ' - ' + JSON.stringify(posting) + '</li>');
            }
        } else {
            $('#removeList').append('<li class="three">' + (count) + ' - ' + JSON.stringify(posting) + '</li>');
            // posting.isDetailsVisible = false;
        }
    } else {
        $('#removeList').append('<li class="four">' + (count) + ' - ' + JSON.stringify(posting) + '</li>');
    }
    count++;
};

var removeRefactor = function (posting) {
    if (posting.isDetailsVisible) {
        if (posting.isInEditMode) {
            if (posting.meetsFilterCriteria) {
                $('removeRefactorList').append('<li class="one">' + (count) + ' - ' + JSON.stringify(posting) + '</li>');
                //    posting.isDetailsVisible = false;
            } else {
                $('#removeRefactorList').append('<li class="two">' + (count) + ' - ' + JSON.stringify(posting) + '</li>');
            }
        } else {
            $('#removeRefactorList').append('<li class="three">' + (count) + ' - ' + JSON.stringify(posting) + '</li>');
            // posting.isDetailsVisible = false;
        }
    } else {
        $('#removeRefactorList').append('<li class="four">' + (count) + ' - ' + JSON.stringify(posting) + '</li>');
    }
    count++;
};



var posts = [{
    isDetailsVisible: false,
    isInEditMode: false,
    meetsFilterCriteria: false
}, {
    isDetailsVisible: false,
    isInEditMode: false,
    meetsFilterCriteria: true
}, {
    isDetailsVisible: false,
    isInEditMode: true,
    meetsFilterCriteria: false
}, {
    isDetailsVisible: false,
   ...