JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Recipe Name </h3>
<input>
<hr>
    
<h3>Description</h3>
<textarea></textarea>
<hr>

    <h3>Fruit</h3>
    <h4>Item</h4>
<select id="fruit">
    <option value="0">--select or type in the textbox--</option>
    <option value="1">apple</option>
    <option value="2">orange</option>
    <option value="3">banana</option>
</select>
 
    <h4>Enter if not on the above list</h4>
<input id="txtItem"> 

    <h4>Qty</h4>
    <input id="txtQty">
    <br><br>
<button class="add-item-button"> add item </button>
<div id="list">
    <!-- prepend new item here
    <div class="item">
        First Item
        <span class="remove-item">x</span>
    </div>
    <div class="item">
        Second Item
        <span class="remove-item">x</span>
    </div>   -->
</div>

CSS

#list{
    width: 140px;
}

.remove-item{
    font-family: sans-serif;
    float: right;
    margin-top: -6px;
    cursor: pointer;
}

.item{
    color: white;
    background: CornflowerBlue;
    margin-bottom: 4px;
    padding: 4px;
    border-radius: 4px;
}

.add-item-button{
    margin-bottom: 10px;
    width: 140px;
}

JavaScript

var item_number = 1;

var remove = function() {  
    console.log('click');
    $(this).parent().animate({opacity: 0}, function () {
        $(this).slideUp();
    });
}
        
$('#list').on('click', '.remove-item', remove);

$('.add-item-button').click(function() {
    var item  = $('#fruit option:selected').text();
    if($('#fruit option:selected').val() ==='0'){
        item = $('#txtItem').val();
    }
    var qty = $('#txtQty').val();
    var new_item = '<div class="item">' +
        item + ' x ' + qty +
        '<span class="remove-item">x</span>' +
        '</div>' 
    $(new_item).prependTo('#list').hide().slideDown();
    item_number = item_number + 1;
});