JSFiddle - React, Tailwind, and code Playground

HTML

<input type="hidden" id="subnam" value="Name" />

<select id="name">
<option value="">Choose one</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>

<ul id="select-to">
</ul>

JavaScript

$(document).ready(function() {

$('#name').change(function(){
    $('#name option:selected').each( function() {       


                $('.asmListItem').animate({
                    opacity: 'show',
                    height: 'show'
                }, 100, "swing", function() { 
                    var originalHeight = $('.asmListItem').height();
                    $('.asmListItem').animate({
                        height: originalHeight + 2 + "px"
                    }, 50, "swing", function() {
                        $('.asmListItem').animate({
                            height: originalHeight + "px"
                        }, 25, "swing"); 
                    }); 
                });
        
        $('#select-to').append("<li class='asmListItem' value='" +$(this).val()+"'><span class='asmListItemLabel'>" + 
       '<b>'+$('#subnam').val() + 
       ' </b>' + $(this).text() + 
       "</span><a href=# class='asmListItemRemove'>remove</a></li>");

        $(this).remove();
    });
});

$('.asmListItemRemove').live('click', function() {
            $(this).closest('li').remove();
});

});