wfw.js

var wfw = function(){
    this.custom = {
        trailerBrands: function(){
            var brands = [];
            function init() {
                CKEDITOR.instances.TrailerBrands.on("loaded", function(){
                    CKEDITOR.instances.TrailerBrands.destroy(true);
                    $('#TrailerBrands').hide();
                });

                $('<div class="new-brand"><input type="text" class="form-control" id="new-brand-name" placeholder="Add new brand"><button class="add-brand">Add</button></div>').insertAfter('#TrailerBrands');

                var startValues = $('#TrailerBrands').val().replace(/\s/g, '');
                if (startValues.length > 0) {
                    brands = startValues.split(',');
                    for(var i=0; i<brands.length;i++) {
                        drawInput(brands[i]);
                    }
                }

                $(document).on('click','.add-brand', function(e){
                    e.preventDefault();
                    addBrand($('#new-brand-name'));
                });

                $(document).on('click','.remove-brand', function(e){
                    e.preventDefault();
                    removeBrand($(this));
                });
            }

            function addBrand(obj){
                drawInput(obj.val());
                brands.push(obj.val());
                obj.val('');
                updateTextarea();
            }

            function removeBrand(obj) {
                var index = brands.indexOf($('#'+obj.data('id')).val());
                brands.splice(index, 1);
                obj.parent().remove();
                updateTextarea();
            }

            function updateTextarea(){
                var val = brands.join();
                $('textarea#TrailerBrands').val(val);
                log($('textarea#TrailerBrands').val());
            }

            function drawInput(value){
                var id  = value.toLowerCase().split(' ').join('-');
                $('<div class="' + id + '-wrapper">').insertAfter('.new-brand');
                $('.'+id+'-wrapper').append(
                    $('<input type="text" class="form-control brand" id="' + id + '" value="' + value + '"><button class="remove-brand" data-id="' + id + '">Remove</button>')
                );
            }

            return init();
        }
    }
    function log(msg){
        console.log(msg);
    }
};