JSFiddle - React, Tailwind, and code Playground

by il kamil

HTML

<ul id="toDo">
    <li><span class="blue">||</span><a href="#">Action1</a></li>
    <li><span class="blue">||</span><a href="#">Action2</a></li>
    <li><span class="blue">||</span><a href="#">Action3</a></li>
    <li><span class="blue">||</span><a href="#">Action4</a></li>
    <li><span class="blue">||</span><a href="#">Action5</a></li>
</ul>

CSS

ul#toDo{list-style:none; padding:0; margin:0;}
ul#toDo li{padding:0; margin:0; border-bottom:1px solid #CCC;}
ul#toDo li a{color:#333; text-decoration:none; line-height:30px; display:block;}
.done{text-decoration:line-through; opacity:0.5;}

.blue{float:left; margin:0 10px 0 0; color:blue; font-weight:bold;} 
.red{float:left; margin:0 10px 0 0; color:red; font-weight:bold;}

JavaScript

console.clear();
$(document).ready(function(){
    $("ul#toDo li").click(function(){
        var completed = $(this);
        $(completed).toggleClass("done");
        
        if(completed.children("span").hasClass("blue")){
           $(completed).children("span").toggleClass("red");
        }
    });
});