JSFiddle - React, Tailwind, and code Playground

by Kupendra Pansuriya

HTML

<input id="value" />
<div id="show"></div>

JavaScript

$('#value').on('keyup input paste',  function(){
    var show=$(this).val().split(',');//.join('<a href="#" class="clear">clear</a><br/>'); 
    var temp="";
    
    for (i=0; i<show.length; i++)
    {
        if(show[i]!="")
        {
            temp += '<div><span>'+show[i]+'</span><a href="#" class="clear">clear</a></div>';
        }
    }
    $('#show').html(temp); 
});

$('#show').on('click','.clear',function(){
    Object.prototype.getKey = function( value ) {
    for( var p in this ) {
        if( this.hasOwnProperty( p ) ) {
             if( this[ p ] === value )
                 return p;
            }
        }
    }
    
    var val = $(this).parent().find('span').html();
    var temp =$("#value").val();//.replace(val ,'');
    temp = temp.split(',');
    temp = temp.filter(function(v){return v!==''});
    var k = temp.getKey(val);
    delete temp[k];
    //temp = temp.split(',');
    temp = temp.filter(function(v){return v!==''});    
    $("#value").val(temp);
    $(this).parent().remove();
    $("#value").keyup();
});