JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="fa-ul">
    <li>
        <div class="lead justified">BE/ BTech/ MCS</div>
        <a href="#" onclick="remove(this)">Delete</a>
        <a href="#" onclick="edit(this)">Edit</a>
    </li>
    <li>
        <div class="lead justified">Solid</div><a href="#" onclick="removeA(this)">Delete</a><a href="#" onclick="edit(this)">Edit</a>
    </li>
    <li>
        <div class="lead justified">Strong</div><a href="#" onclick="removeA(this)">Delete</a><a href="#" onclick="edit(this)">Edit</a>
    </li>
    <li>
        <div class="lead justified">Sharp</div><a href="#" onclick="removeA(this)">Delete</a><a href="#" onclick="edit(this)">Edit</a>
    </li>
    <li>
        <div class="lead justified">Ability</div><a href="#" onclick="removeA(this)">Delete</a><a href="#" onclick="edit(this)">Edit</a>
    </li>
    <li>
        <div class="lead justified">Deal problems</div><a href="#" onclick="removeA(this)">Delete</a><a href="#" onclick="edit(this)">Edit</a>
    </li>
    <li>
        <div class="lead justified">Strong</div><a href="#" onclick="removeA(this)">Delete</a><a href="#" onclick="edit(this)">Edit</a>
    </li>
    <li>
        <div class="lead justified">Excellent</div><a href="#" onclick="removeA(this)">Delete</a><a href="#" onclick="edit(this)">Edit</a>
    </li>
</ul>

CSS

a{
    display:inline-block;
    margin:.5em;
}
.justified{
    display:inline-block;
}

JavaScript

function removeA(elem){   
    $(elem).closest('li').remove();
    return false;
}
function edit(elem){
    $(elem).siblings('div.lead').attr('contenteditable',true);
    return false;
}