JSFiddle - React, Tailwind, and code Playground

HTML

<div class="subscription">
    <span class="remove">-</span>
    Every
    <div class="drop">
        <span class="value">select</span>
        <ul class="single">
            <li>day</li>
            <li>week</li>
            <li>month</li>
        </ul>
    </div>, send me
    <div class="drop">
        <span class="value">select</span>
        <ul class="multi">
            <li>apples</li>
            <li>oranges</li>
            <li>bananas</li>
            <li>mangos</li>
            <li>grapes</li>
        </ul>
    </div>.
</div>
<div class="new">+ Add new subscription group</div>

CSS

* {
    outline: none !important;
    -webkit-user-select: none !important;
	-khtml-user-select: none !important;
	-moz-user-select: none !important;
	-ms-user-select: none !important;
	user-select: none !important;
}
body {
    padding: 10px;
}
.new,
.subscription {
    padding: 5px;
    border: 1px solid #ddd;
    margin-bottom: 10px;
    background: #f7f7f7;
    white-space: nowrap;
}
.new {
    color: #090;
    cursor: pointer;
}
.remove {
    color: #c00;
    cursor: pointer;
}
.value {
    color: #666;
}
.value.set {
    color: #036;
}
.drop {
    display: inline-block;
    position: relative;
}
.drop ul {
    border: 1px solid #ddd;
    border-top: 5px solid transparent;
    margin-left: -5px;
    background: #f7f7f7;    
    display: none;
    position: absolute;
    top: 100%; left: 0;
}
.drop:hover ul {
    display: block;
    z-index: 10;
}
.drop ul li {
    padding: 5px 5px 5px 25px;
    position: relative;
}
.drop ul li:hover {
    background: #fff;
}
.drop ul li:before {
    content: '';
    width: 19px;
    height: 19px;
    margin-top: -9.5px;
    display: block;
    background-image: url('http://static.freepik.com/free-photo/active-checkbox-radiobutton_29-153.jpg');
    background-repeat: no-repeat;
    position: absolute;
    top: 50%; left: 2.5px;
}
.drop ul.single li:before {
    background-position: -252px -106px;
}
.drop ul.single li.active:before {
    background-position: -276px -106px;
}
.drop ul.multi li:before {
    background-position: -332px -106px;
}
.drop ul.multi li.active:before {
    background-position: -356px -106px;
}

JavaScript

var $sub = $('.subscription');

$sub
    .on('click', '.remove', function() {
        $(this).parent().remove();    
    })
    .on('click', 'li', function(e) {
        var $this = $(this),
            $parent = $this.parent(),
            $options = $parent.children('li'),
            $value = $parent.siblings('.value'),
            isMulti = $parent.hasClass('multi'),
            values = [];
        
        if(!isMulti) {
            $options.removeClass('active');            
        }
        
        $this.toggleClass('active');
        
        $options.filter('.active').each(function() {
            values.push($(this).text());
        });
        
        $value.text(values.join(', ') || 'select');
        
        $value[(values.length ? 'add' : 'remove') + 'Class']('set');
    });

var $clone = $sub.clone(true);

$('.new')
    .on('click', function() {
        $(this).before($clone.clone(true));
    });