JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="col-xs-4">
    <label>Column</label>
    <select class="form-control" id="column">
        <option value="">Select a Column</option>
        <option value="">Description</option>
        <option value="">Value</option>
    </select>
</div>
<div class="col-xs-4" id="type">
    <label>Sort Type</label>
    <select class="form-control">
        <option value="none">Select a Sort Type</option>
        <option value="Ascending">Ascending</option>
        <option value="Descending">Descending</option>
        <option value="Referenced">Referenced</option>
    </select>
</div>
<div class="col-xs-2 pull-right">
    <div class="btn btn-default btn-sm" id="add" style="display:none;"><span class="glyphicon glyphicon-ok"></span>
    </div>
    <div class="btn btn-default btn-sm" id="delete" style="display:none;"><span class="glyphicon glyphicon-remove"></span>
    </div>
    <div class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" id="button" style="display:none;">... <span class="caret"></span>
    </div>
    <ul class="dropdown-menu">
        <li><a href="#">Entity 1</a>
        </li>
        <li><a href="#">Entity 2</a>
        </li>
        <li><a href="#">Entity 3</a>
        </li>
        <li><a href="#">Entity 4</a>
        </li>
    </ul>
</div>
<div class="col-xs-12 sorter"></div>

CSS

body {
    margin:30px;
}
.btn-default {
    margin-top: 25px;
}
.sorter {
    margin-top:5px;
}
.tag {
    margin: -2px 5px 3px 0px;
    padding: 0px;
    border: 1px solid #aaa;
    color: #777;
    float: left;
    font-size: 12px;
    background-color: #E2EFFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    width: 100%;
    height: 23px;
    display: inline-flex;
}
.tagText {
    width: 95%;
    height: 25px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 13px;
    white-space: nowrap;
    padding-left: 20px;
}
.tag span {
    margin-left:5px;
    margin-top: 4px;
    /*margin-top: -15px;
    margin-right: -8px;*/
}
.center {
    padding-left:50px;
}
.move {
    float:left;
    line-height: 12px;
    color:#777;
    margin-left: -10px!important;
}
.form-control {
    display: block;
    width: 100%;
    height: 30px;
    padding: 4px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.pull-right div {
    float:right;
}
.btn {
    margin-left:5px;
}

JavaScript

$("#type").change(function () {
    if ($("#type option:selected").val() == 'Referenced') {
        $('#button').show();
        $('#add, #delete').show();
        //$('#delete').show();

    } else {
        $('#button').hide();
        $('#add, #delete').show();
        //$('#Delete').show();
    }


    $('#add').click(function () {

        $(document).on('click', '.dropdown-menu li', function () {
            var reference = $(this).text();

            if (!reference) {
                var build = [$('.sorter').append('<div class="tag"><div class="tagText"><span class="glyphicon glyphicon-move move"></span><span class="col-xs-3"><label>Column: </label>' + colline + '</span> <span class="col-xs-3"><label>Sort type: </label>' + typeline + '</span><span class="col-xs-3"><label>Reference: </label>' + reference + '</span><span class="glyphicon glyphicon-remove pull-right" onClick="$(this).parent().parent().hide();"></span></div></div>')]
            }

        })
        
        var colline = [$("#column option:selected").text()];
        var typeline = [$("#type option:selected").text()];


        var build = [$('.sorter').append('<div class="tag"><div class="tagText"><span class="glyphicon glyphicon-move move"></span><span class="col-xs-3"><label>Column: </label>' + colline + '</span> <span class="col-xs-3"><label>Sort type: </label>' + typeline + '</span><span class="glyphicon glyphicon-remove pull-right" onClick="$(this).parent().parent().hide();"></span></div></div>')];
        event.stopPropagation();
    })


});


function loaded() {
            document.getElementById("Button1").Behavior = "new_behavior";
        }