JSFiddle - React, Tailwind, and code Playground

by DaveAlger

HTML

<button id="bgtoggle">toggle background style</button>
<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 100px 4px 100px; border: 2px solid #eee; cursor: pointer; background: #abc;}
#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;}

body
{ 
    background: #444444 url('http://www.brandonebward.com/helloskinny/test/images/bgPinstripe.jpg') repeat-y content-box scroll center;
    margin: 0px 0px 0px 0px;
    font: 1em/1.180em Segoe Light, Tahoma, sans-serif;
}

.fixed-bg
{
    background-attachment: fixed;
}

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());
    });
    
    $('#bgtoggle').bind('click', function() {
        $('body').toggleClass('fixed-bg');
    });
    
    var i = 50;
    while ( i-- ) {
        $('#add').trigger('click');
    }
});

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