JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    </table>
<input type="text" id ='temp' value="" />

CSS

table {
    width: 100%;
}
td {
    height: 25px;
    border: solid 1px silver;
width:20%;}
#temp { display: none;}

JavaScript

$(function(){
    $('td').on('click', function(){
                  enterval=$(this).text();
                  $(this).text('');
                  $('#temp').val(enterval) ; 
                  enterval='';
                  $(this).append( $('#temp') );
                  $('#temp').show().focus();
    })
    
    $('#temp').on('blur', function(){
        
    outval= $(this).val();
    $td=$(this).parent('td');
         $(this).val('').hide();
    $('body').append($(this))
        $td.text(outval);
    }).on('click',function(e){
    e.stopPropagation()});
    })