JSFiddle - React, Tailwind, and code Playground
HTML
<select size="5" id="skills" multiple>
<option value="0">Choose - Skills</option>
<option value="19">Analytics</option>
<option value="20">Android</option>
</select>
<input type="button" id="addskills" value="Add">
<div class="skill-text">
</div>
JavaScript
$(function(){
$('#addskills').on('click', function(){
$('#skills :selected').each(function(i, selected){
var text = $(this).text();
alert(text);
var value = $(this).val();
$('.skill-text').prepend("<span class='removeskill' data-id='"+value+"'>"+text+"<i class='fa fa-times' ></i></span>")
});
});
$('body').on('click',".removeskill", function(){
var id = $(this).data("id");
alert(id);
//$('body').find("#skills option[value="+id+"]").removeAttr("selected");
//$('#skills :selected').find("option[value="+id+"]").removeAttr("selected");
$('#skills :selected').each(function(i, selected){
if($(this).val() == id){
alert('inside if');
$(this).removeAttr('selected');
}
})
});
})