JSFiddle - React, Tailwind, and code Playground

HTML

<table border=1 id='search' class='queue'>
<tr>
    <th>ID</th><th>Vendor</th><th>Notes</th><th>Date</th><th>Total</th>
</tr>
<tr id='row_1'>
    <td>1</td>
    <td>vendor 1</td>
    <td class='edit_td' onClick="liveEdit('1');"><span id='notes_1' class='text'>Testing 123.</span><input style='display:none;' type='text' value='Testing 123.' class='editbox' id='notes_input_1' /><span style='display:none;' id='visual_1'></span></td>
    <td>2012-08-06</td><td class='right'>100.00</td>
</tr>
</table>

JavaScript

function liveEdit(id){
    $("#notes_"+id).hide();
    $("#notes_input_"+id).show();
    $(".editbox").change(function(){
        var notes=$("#notes_input_"+id).val();
        var data = 'id='+ id +'&notes='+notes;
        if(confirm("Are you sure you wanted to update notes?")){
            $("#visual_"+id).html('<img src="http://powerfulorganisations.com/images/style/list_check-mark-green-small.png" />').fadeIn('slow').delay(3000).fadeOut('slow');
            $("#notes_"+id).html(notes);

       }
       else{
           return false;
       }
    });
    // Edit input box click action
    $(".editbox").mouseup(function(){
        return false;
    });
    // Outside click action
    $(document).mouseup(function(){
        $(".editbox").hide();
        $(".text").show();
    });
}