JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="https://vitalets.github.io/x-editable/assets/x-editable/bootstrap-editable/css/bootstrap-editable.css">
<script src="https://vitalets.github.io/x-editable/assets/x-editable/bootstrap-editable/js/bootstrap-editable.js"></script>
<script src="https://vitalets.github.io/x-editable/assets/select2/select2.js"></script>
<link rel="stylesheet" href="https://vitalets.github.io/x-editable/assets/select2/select2.css">
<script src="https://vitalets.github.io/x-editable/assets/mockjax/jquery.mockjax.js"></script>
<div class="row" id="margin-content">
	<div class="col-sm-4">
	
	</div>
    <div class="col-sm-4">
        <span class="components" data-name="components_id" id="components-editable-22081" data-toggle="manual" data-type="select2" data-custom-url="ticket/update" data-pk="22081" data-value="1,2" data-project="5" data-original-title="Add Components: "></span>
        <a href="javascript:void(0)" id="components-edit-22081" data-editable="components-editable-22081" class=""> <i class="fa fa-plus text-info tip" title="Add Components" data-original-title="Add Components"></i></a>
    </div>
	<div class="col-sm-4">
	
	</div>
</div>

CSS

#margin-content {
	margin: 90px 10px;	
}

JavaScript

var cache_components = [{
    value: 1,
    text: 'back-office'
}, {
    value: 2,
    text: 'front-office'
}, {
    value: 3,
    text: 'report'
}];

$('.components').editable({
    source: function() {
        return cache_components;
    },
    placement: 'right',
    emptytext: 'None',
    autotext: 'always',
    select2: {
        width: '150px',
        multiple: true,
        placeholder: 'Component/s',
        tokenSeparators: [" ", ","]
    },
    display: function(value) {
        var val1 = [value].toString().split(",");
        var val2 = val1.filter(function(val) {
            if (val) return val
        }).join(",");
        var val3 = val2.split(",");
        // console.log(val4);
        $.each(val3, function(i) {
            $.each(cache_components, function(i2, varr) {
                if (varr.id == val3[i]) {
                    val3[i] = "<span class='label label-primary'>" + $('<p>' + varr.text + '</p>').text() + "</span>";
                }
            });
        });
        $(this).html(val3.join(" "));
    },
    params: function(params) {
        params.modified_by = USER_LOGGED_ID;
        return params;
    }
});

$('.components').on('shown', function() {
    var editable = $(this).data('editable');
    var value = editable.value;
    var val1 = [value].toString().split(",");
    var val2 = val1.filter(function(val) {
        if (val) return val
    }).join(",");
    var val3 = val2.split(",");
    // console.log(val4);
    $.each(val3, function(i) {
        $.each(cache_components, function(i2, varr) {
            if (varr.id == val3[i]) {
                val3[i] = "<span class='label label-primary'>" + $('<p>' + varr.text + '</p>').text() + "</span>";
            }
        });
    });
});

$('[id^="components-edit-"]').click(function(e) {
    e.stopPropagation();
    e.preventDefault();
    $('#' + $(this).data('editable')).editable('toggle');
});

//ajax emulation
$.mockjax({
    url: '/post',
    status: 200,
    responseTime: 200
});