JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <div class="fruit_name">Apple</div> 
        <div class="remove" id="Apple">Remove</div>
    </li>
    <li>
        <div class="fruit_name">Peach</div> 
        <div class="remove" id="Peach">Remove</div>
    </li>
    <li>
        <div class="fruit_name">Banana</div> 
        <div class="remove" id="Banana">Remove</div>
    </li>
</ul>

<input type="text" value="Apple,Peach,Banana" id="fruits" />

CSS

ul {
    width:200px;
    height:80px;
}

li {
    clear:both;
    display:block;
}

.fruit_name {
    float:left;
}

.remove {
    float:right;
    color:red;
}

JavaScript

$('.remove').click(function(){
    var fruit_remove = $(this).attr("id"); //get name of fruit to remove
    var fruits_array = $('#fruits').val().split(","); //transforms input value into an array
    
    if ($.inArray(fruit_remove, fruits_array) > -1) { //if fruit clicked to be removed is in fruits array   
        
        var fruit_index = fruits_array.indexOf(fruit_remove); //get index of fruit to be removed
        alert('Index of '+fruit_remove+' is '+fruit_index); //testing index
        
        //missing function here that removes fruit from fruits array
        
        $('#fruits').val(fruits_array.join(',')); //add new array to text input
        $(this).parent('li').remove(); //remove fruit from HTML list
        
    }
            
});