JSFiddle - React, Tailwind, and code Playground

by DaveAlger

HTML

<hr/>
<div id="list"></div>
<button id="add">Add Escalation Step</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: silver; border: 1px solid #999; padding: 2px 6px 0px 6px;}
#item-close:hover{ background: #ccc;}

JavaScript

function getNewListItem() {
    return '<div class="list-item">Notify ' +
        '<select id="select-rule">' +
        '<option value="all">ALL group members</option>' +
        '<option value="one">specified group member</option>' +
        '<option value="cal">group member from calendar</option>' +
        '</select>' +
        '<select id="select-user" style="display:none;">' +
        '<option value="user1">Don Flamingo</option>' +
        '<option value="user2">Aaron Ryan</option>' +
        '<option value="user3">Bob Charlie</option>' +
        '</select>' +
        '<select id="select-calendar" style="display:none;">' +
        '<option value="cal1">Primary</option>' +
        '<option value="cal2">Secondary</option>' +
        '</select>' +
        '<span id="item-close">X</span>'+
        '</div>';
}
        
$(document).ready( function() {
    $('#add').bind('click', function() {
        $('#list').append(getNewListItem());
    });
});

$(document).on( 'click', '#item-close', function(event){
    $(event.target).parent().hide(200);
});

$(document).on( 'change', '#select-rule', function(event){
    var i = $(event.target);
    
    i.siblings('#select-user').hide();
    i.siblings('#select-calendar').hide();
    
    if (i.val() === 'one') {
        i.siblings('#select-user').show();
    }
        
    else if (i.val() === 'cal') {        
        i.siblings('#select-calendar').show();
    }   
});