JSFiddle - React, Tailwind, and code Playground

by Tom DeBerardine

HTML

<div class="duplicate-filter"></div>
<div class="views-exposed-form">
    <div class="views-exposed-widgets clearfix">
        <div id="edit-tid-1-wrapper" class="views-exposed-widget left grid-full views-widget-filter-tid_1">
            <div class="views-widget">
                <div id="edit-tid-1" class="form-radios bef-select-as-radios">
                    <div class="form-item form-type-radio form-item-tid-1">
                        <input id="edit-tid-1-2" name="tid_1" value="2" class="form-radio dls-radio" type="radio">
                        <label class="dls-radio-wrapper" for="edit-tid-1-4">
                            <div class="dls-radio-mark"></div>
                        </label>
                        <label class="option" for="edit-tid-1-4">Best</label><span style="color: #adadad;"> (3)</span>

                    </div>
                    <div class="form-item form-type-radio form-item-tid-1">
                        <input id="edit-tid-1-2" name="tid_1" value="2" class="form-radio dls-radio" type="radio">
                        <label class="dls-radio-wrapper" for="edit-tid-1-2">
                            <div class="dls-radio-mark"></div>
                        </label>
                        <label class="option" for="edit-tid-1-2">New</label><span style="color: #adadad;"> (4)</span>

                    </div>
                    <div class="form-item form-type-radio form-item-tid-1">
                        <input id="edit-tid-1-3" name="tid_1" value="3" class="form-radio dls-radio" type="radio">
                        <label class="dls-radio-wrapper" for="edit-tid-1-3">
                            <div class="dls-radio-mark"></div>
                        </label>
                        <label class="option" for="edit-tid-1-3">Sales</label><span style="color: #adadad;"> (3)</span>

                    </div>
                </div>
            </div>
        </div>
        <div id="edit-tid-2-wrapper"...

CSS

.views-exposed-widget.left {
    margin-bottom: 20px;
}
.views-widget-sort-by {
    background: yellow;
    width: 100%;
    height: 50px;
    margin-bottom: 40px;
}
.duplicate-filter span[data-for] {
    position: relative;
    cursor: pointer;
    font-size: 14px;
    color: #000;
    text-decoration: underline;
    padding: 7px;
    margin-right: 5px;
    margin-bottom: 5px;
}
.duplicate-filter span[data-for]:after {
    content:'x';
    top: -4px;
    left: 2px;
    position: relative;
    text-decoration: none;
    color: #fff;
    padding: 0px 2px;
    background: #46cc83;
    display: inline-block;
    line-height: 12px;
}

JavaScript

$('.views-exposed-widget').on('change', 'input', function () {
		    var self = $(this),
		        name = this.name,
		        text = self.closest('.form-type-radio').find('label[class="option"]').text(),
		        target = $('.duplicate-filter').find('[data-for="' + name + '"]');

		    if (target.length == 0) {
		        target = $('<span class="o_filt" data-for="' + name + '"></span>').appendTo('.duplicate-filter');
		    }
		    target.text(text);

		    $('.o_filt').on('click', function () {
		        var l = $(this).text();
		        $(this).remove();
                $('input[name="' + $(this).data('for') + '"]').prop('checked', false);
            });

		});