JSFiddle - React, Tailwind, and code Playground

HTML

<div id="notes">Notes...</div>
<ul>
    <li>First</li>
    <li class="active">Second</li>
    <li>Third</li>
    <li>Fourth</li>
</ul>
<button>Refresh</button>
<a class="clear" href="#">Clear</a>

JavaScript

// @todo - store the data
var clonedItems = $("li").clone(true);

// allow user to click to remove each item
$("ul").one('click', "li.active", function() {
   
    $(this).fadeOut(); // or fade?
    
});

// @todo - and clear will wipe out all items
$("a.clear").on('click', function() {
    $("ul").fadeOut(500, function() {
       $(this).empty(); 
    });
});

// @todo - refresh will re-set data
$("button").on('click', function() {
    
    $("ul").empty().append(clonedItems);
    
});

// @todo - delegation