JSFiddle - React, Tailwind, and code Playground

HTML

<label><input  id="activate" type="checkbox" checked/>activate</label>
<div id="messages">
</div>

JavaScript

// this will work, even if there are several nodes with the same id (which technically is incorrect in a same page)
$('#messages').on('click', '#error', function(){
    $(this).fadeOut();
});

// add items with a delay :
function addItem(){
    if ( $('#activate').prop('checked') ){
        $('#messages').append('<div id="error">Error</div>');
        setTimeout(addItem, 3000);
    }
}

$('#activate').change(function(){
    addItem();
});

addItem();