JSFiddle - React, Tailwind, and code Playground

by dactivo

HTML

<table><tr><td><a class="edit">Edit</a> $100</td></tr></table>

CSS

.highest{
color:red
}
.lowest{
color:green
}
.medium{
color:orange
}

JavaScript

$(document).ready(function(){

    $('a.edit').hide();
  
    $('tr').hover(
        function(){

            if($('input',this).length==0)
            {
                $(this).find('a.edit').show();
            }
        },
        function(){
            $(this).find('a.edit').hide();
        }
    );

    $('a.edit').click(function(e){
        e.preventDefault();
        $(this).hide();
        $(this).after('<input type="text" style="width:100%;" />');
    });
});