JSFiddle - React, Tailwind, and code Playground

by snavarro81

HTML

<script src="http://aehlke.github.io/tag-it/js/tag-it.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tag-it/2.0/js/tag-it.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tag-it/2.0/css/jquery.tagit.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tag-it/2.0/css/jquery.tagit.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<ul id="mytags" data-bind='foreach: SelectedTags ' >
    <li style="display:none" data-bind="text:Name"></li>
</ul>
<button  data-bind="click:ver">Ver</button>

JavaScript

function AppViewModel() {
var self = this;

self.sebas = ko.observable('nada');

self.ver = function(){
console.log(ko.toJSON(self));
};

self.SelectedTags = ko.observableArray([
    new Tag({'Name':'red'})]);

    return self;
 }
function Tag(data) {
            this.Name = ko.observable(data.Name);
        }
// Activates knockout.js

window.vm =new AppViewModel()
ko.applyBindings(window.vm);

$("#mytags").tagit({
    
     onTagAdded: function (event, tagval) {
                        //on every add add with id if tag exist in system
                        var newtag = $(tagval).children('span.tagit-label').html();
                     		window.vm.SelectedTags.push(new Tag({ "Name": newtag} ));
                    },
    onTagRemoved: function (event, tagval) {
                        // do something special
                        var tempTag = $(tagval).children('span.tagit-label').html();
                        console.log(tempTag);
                        window.vm.SelectedTags.remove(_.find(window.vm.SelectedTags, function (item) { return item.Name == tempTag; }));
                    }
});