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-up,
#item-down,
#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-up:hover,
#item-down:hover,
#item-close:hover
{ background: #ccc;}

#item-position{float: right; width: 30px; height: 20px; text-align:right; color: #999999;}

JavaScript

function getNewListItem(v) {
    if ( !v ) v = '0';
    return '<div class="list-item">' +
        '<input id="item-position" value="'+v+'"></input> '+
        ' 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-up">▲</span>'+
        '<span id="item-down">▼</span>'+
        '<span id="item-close">X</span>'+
        '</div>';
}
        
$(document).ready( function() {
    $('#add').bind('click', function() {
        var len = $('#list').children().length + 1;
        $('#list').append(getNewListItem(len));
    });
});

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

$(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();
    }   
});