JSFiddle - React, Tailwind, and code Playground
HTML
<ul>
<input type="text" name="add_tag[]" class="add-tag">
<input type="button" value="Add Tag" class="input-button" id="tags-add">
<div id="tags">
</div>
</ul>
JavaScript
function tag_string_replace(ip) {
var str = ip;
return str.replace(/([^a-zA-Z0-9\s\-\_\.])|^\s|\s$/g, '');
}
jQuery.fn.addTag = function(v) {
jQuery('.add-tag').not(':button, :submit, :reset, :hidden').val('').removeAttr('checked').removeAttr('selected');
var r = v.split(',');
var html;
for (var i in r) {
n = tag_string_replace(r[i]);
if (n == '') break;
var fn = jQuery(this).data('name');
var i = jQuery('<input type="hidden" />').attr('name', fn).val(n);
html = '<a class="function tag-delete" href="#" onclick="return false;">[x]</a><a href="#" onclick="return false;">' + n + '</a>';
//alert(jQuery('#tags .tag-delete').attr('class'));
var t = jQuery('<li />').html(html).click(function() {
var hidden = jQuery(this).data('hidden');
var o = this;
jQuery('#tags .tag-delete').click(function() {
jQuery(hidden).remove();
jQuery(o).remove();
});
}).data('hidden', i);
var l = jQuery(this).data('list');
jQuery(l).append(t).append(i);
}
return this;
};
jQuery(function() {
jQuery('.add-tag').each(function(i) {
jQuery(this).data('name', jQuery(this).attr('name'));
var b = jQuery('#tags-add').click(function() {
var tagger = jQuery(this).data('add-tag');
jQuery(tagger).addTag(jQuery(tagger).val());
}).data('add-tag', this);
var l = jQuery('<div />').attr({
id: 'tags'
});
jQuery(this).data('list', l).after(l).after(b);
}).bind('keypress', function(e) {
if (13 == e.keyCode) {
e.stopPropagation();
e.preventDefault();
jQuery(this).addTag(jQuery(this).val()).val('');
}
});
});