JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="fa-ul">
    <li><span class="lead justified"> BE/ BTech/ MCS </span>

    </li>
    <li><span class="lead justified"> Solid </span>

    </li>
    <li><span class="lead justified"> Strong </span>

    </li>
    <li><span class="lead justified"> Sharp </span>

    </li>
    <li><span class="lead justified"> Ability</span>

    </li>
    <li><span class="lead justified"> Deal problems</span>

    </li>
    <li><span class="lead justified"> Strong </span>

    </li>
    <li><span class="lead justified"> Excellent </span>

    </li>
</ul>

JavaScript

$('ul li').each(function () {
    $(this).append('<a class="delete" href="#">Delete</a>  <a href="#" class="edit">Edit</a>')
});
$('ul li a.delete').on('click', function () {
    $(this).parent().remove();
    return false;
});
$('ul li a.edit').on('click', function () {
    var val = $(this).siblings('span').html();
    if (val) {
        $(this).parent().prepend('<input type="text" class="txt" value="' + val + '" />');
        $(this).siblings('span').remove();
        $(this).html('Update');
    } else {
        var $txt = $(this).siblings().filter(function() { return $(this).hasClass('txt') });
        $(this).parent().prepend('<span class="lead justified">' + $txt.val() + '</span>');
        $txt.remove();
        $(this).html('Edit');
    }
    return false;
});