JSFiddle - React, Tailwind, and code Playground

by oduska

HTML

<ul id="guests"><li id="1" class=""><span class="star">★</span> <span class="delete">✕</span><span class="count">1</span><span class="name">Guest Name #1</span></li><li id="2" class=""><span class="star">★</span> <span class="delete">✕</span><span class="count">2</span><span class="name">Guest Name #2</span></li><li id="3" class=""><span class="star">★</span> <span class="delete">✕</span><span class="count">3</span><span class="name">Guest Name #3</span></li><li id="4" class=""><span class="star">★</span> <span class="delete">✕</span><span class="count">4</span><span class="name">Guest Name #4</span></li></ul>

<p id="debug"></p>

CSS

body {
    background-color: #f5f5f5;
    font-family: Arial, sans-serif;
    font-size: 15px;
}

ul {
    margin: 0; padding: 0;
    list-style: none;
}

ul li {
    display: block;
    background-color: #fff;
    padding: 0.4em;
    margin-bottom: 0.2em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: default;
}

.star, .delete {
    display: inline-block;
    border: 2px solid #e5e5e5;
    padding: 0.3em 0.6em;
    border-radius: 4px;
    line-height: 16px;
    vertical-align: middle;
    background-color: #e5e5e5;
    cursor: default;
    color: #666;
}

.count {
    margin: 0 0.5em;
    color: #999;
    vertical-align: middle;
}

.name {
    vertical-align: middle;
}

/* Actions --------------------------------------- */

.vip {
    background-color: #3cb371;
    color: #fff;
}

.vip .star {
    border-color: #fff;
    color: #3cb371;
    background-color: #fff;
}

.vip .count { color: #fff; }

.vip .delete {
    border-color: #fff;
    background-color: #fff;
    color: #666;
    opacity: 0.2;
}

.remove {
    background-color: #dd7d60;
    color: #fff;
}

.remove .star {
    opacity: 0.3;
    border-color: #fff;
    background-color: #fff;
}

.remove .count { color: #fff; }

.remove .delete {
    background-color: #fff;
    border-color: #fff;
    color: #dd7d60;
}

.remove .name { text-decoration: line-through; }

JavaScript

$(function() {
    $('#guests').on('click', '.star', function(e) {
        var parent = $(this).parent();
        
        if ( $(parent).hasClass('vip') ) {
            $(parent).removeClass('vip')
        } else {
            $(parent).removeClass('remove').addClass('vip');
        }
    });
    
    $('#guests').on('click', '.delete', function(e) {
        var parent = $(this).parent();
        
        if ( $(parent).hasClass('remove') ) {
            $(parent).removeClass('remove')
        } else {
            $(parent).removeClass('vip').addClass('remove');
        }
    });
});