JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div class="container mt-3 mb-3">
        <nav class="navbar navbar-light bg-light">
            <div class="navbar-brand font-weight-bold">Список дел</div>
            <div class="navbar navbar-right">
                <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Управление
                    </button>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        <a class="dropdown-item" href="#" id="clear-done">Стереть выполненные</a>
                        <a class="dropdown-item" href="#" id="clear-all">Стереть все</a>
                    </div>
                </div>
            </div>
        </nav>
    </div>

    <div class="container" style="width: 600px">
        <ul class="list-group" id="to-do-list">
            <li id="add-field" class="list-group-item">
                <div class="input-group">
                    <input autocomplete="off" type="text" class="form-control pb-2" id="input"
    ...

CSS

.click-done {
    text-decoration: line-through;
}

.hover-done {
    text-decoration: line-through;
}

.click-done-color {
    background-color: rgba(0, 255, 0, 0.1)
}

.hover-done-color {
    background-color: rgba(0, 255, 0, 0.1)
}

JavaScript

$('body').css('user-select', 'none')

function addNote() {
    if ($('input').val() != '') {
        $('#to-do-list').prepend(`
    <li class="list-group-item notes">${$('#input').val()}</li>
    `).hide().slideDown();
    }

    $('#input').val('');

}

function addEvents() {
    $('#to-do-list .notes').click(function (e) {
        e.preventDefault();
        $(e.target).toggleClass('click-done');
        $(e.target).toggleClass('click-done-color');
        $(e.target).removeClass('hover-done');
        $(e.target).removeClass('hover-done-color');
    });

    $('#to-do-list .notes').hover(function () {
        // over
        $(this).addClass('hover-done');
        $(this).addClass('hover-done-color');
    }, function () {
        // out
        $(this).removeClass('hover-done');
        $(this).removeClass('hover-done-color');
    }
    );

    $('#to-do-list .notes').dblclick(function (e) {
        $(e.target).slideUp(() => {
            $(e.target).remove();
        });
    })
}

$('#add-button').click(function (e) {
    e.preventDefault();
    addNote();
    addEvents();
});

$('#input').keypress(function (e) {
    let keyCode = e.which;
    if (keyCode == '13') {
        addNote();
        addEvents();
    }
});

$('#clear-all').click(function (e) {
    e.preventDefault();
    $('.notes').each(function (index, element) {
        // element == this
        $(this).slideUp(() => {
            $(this).remove();
        });
    });
});

$('#clear-done').click(function (e) {
    e.preventDefault();
    $('.click-done').each(function (index, element) {
        // element == this
        $(this).slideUp(() => {
            $(this).remove();
        });
    });
});