JSFiddle - React, Tailwind, and code Playground

by TrueBlueAussie

HTML

<ul class="list-group" align="left">
    <li class="list-group-item" id="active-to-do-list-1" style="padding-bottom: 14px; line-height: 20px;"><span style="margin-right: 12px;"><span class="label label-default" id="active-to-do-number-1">1</span></span>Task1
        <div class="text-right" style="float: right;"> <a href="#deleteTodoDialog" class="open-DeleteTodo btn btn-danger" data-toggle="modal" data-id="1" style="height: 26px; padding-top: 4px; padding-bottom: 2px; margin-right: 5px; width: 40px;"><span class="glyphicon glyphicon-minus-sign"></span></a>
 <a href="#editTodoDialog" class="open-EditTodo btn btn-warning" data-toggle="modal" data-id='{"id":1,"todo":"task1)"}' style="height: 26px; padding-top: 4px; padding-bottom: 2px; margin-right: 5px; width: 40px;"><span class="glyphicon glyphicon-edit"></span></a>
 <a href="#doneTodoDialog" class="open-DoneTodo btn btn-success" data-toggle="modal" data-id="1" style="height: 26px; padding-top: 4px; padding-bottom: 2px; margin-right: 5px; width: 40px;"><span class="glyphicon glyphicon-ok-sign"></span></a>

        </div>
</ul>

CSS

.active {
    border: 2px solid green;
}
.hover {
    background-color: yellow;
}

JavaScript

$(document).ready(function () {
    $('.list-group').on('mouseenter', '.list-group-item', function () {
        $(this).addClass("hover");
    }).on('mouseleave', '.list-group-item', function () {
        $(this).removeClass("hover");
    }).on('click', '.list-group-item', function(){
        $(this).toggleClass("active");
    });
});