JSFiddle - React, Tailwind, and code Playground

by DaveAlger

HTML

<hr/>
<div id="list">
    <div class="list-item" id="default-item">Notify me at [email protected]</div>
</div>
<button id="add">Add Notification Method</button>

CSS

hr{margin:40px 0px 20px 0px; border: 1px dashed silver;}
.list-item { padding: 8px; margin: 4px; border: 2px solid #eee; cursor: pointer; }
#item-close{ float: right; font-family: sans-serif; font-weight: bold; color: white; background: crimson; border: 1px solid crimson; padding: 2px 6px 0px 6px;}
#item-close:hover{ background: #c99;}

JavaScript

function getNewListItem() {
    return '<div class="list-item">wait ' +
        '<input value="10" size="2"></input> minutes and then notify me at ' +
        '<input value="[email protected]"></input>' +
        '<span id="item-close">X</span>'+
        '</div>';
}

$(document).ready( function() {
    $('#add').bind('click', function() {

        if ($('#list').children().size() == 1  &&  $('#list').children('.list-item').text() == "Notify me at [email protected]") {
            $('#list').children('#default-item').hide();
        }
        
        $('#list').append(getNewListItem());
        
    });
});

$(document).on( 'click', '#item-close', function(event){
    $(event.target).parent().remove();
    if ($('#list').children().size() == 1) {
        $('#list').children('#default-item').show();
    } else {
        $('#list').children('#default-item').hide();
    }
});