JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div class="item">
         <div class="icon1"><i class="default"></i>Default</div>
         <div class="edit">Change</div>
    </div>
    
    <div class="item">
         <div class="icon2"><i class="default"></i>Default</div>
         <div class="edit">Change</div>
    </div>
</div>

<div class="list">
    <ul>
        <li> <i class="class1"></i>New 1</li>
        <li> <i class="class2"></i>New 2</li>        
    </ul>
</div>

CSS

.list{
    border: 1px solid green;
    display: none;
}

.item{
    margin-bottom: 20px;
}

.selected{
    font-weight: 700;
    color: green;
}

JavaScript

$('.edit').click(function(e){ 
      $('.list').css({display: 'block'});       
});

$('.list ul li').click(function() {
    $('.list ul li').removeAttr('class');
    $(this).addClass('selected');
    
    var new_class = $(this).children('i').attr('class');
    //alert(new_class);
});