JSFiddle - React, Tailwind, and code Playground

HTML

<table class='editable' width="100%" border="1" cellspacing="3" cellpadding="3">
    
    <tr>
        <th></th>
        <th>Event</th>
        <th></th>
        <th></th>
        <th></th>
        <th>Capacity</th>
    </tr>
    
    
    
    <tr>
        <td>
            <input type='hidden' value='234' class='id'>
        </td>   
        <td colspan='4' class='event_name'>
            Party
        </td>
        <td class='event_capacity'>
            234
        </td>
    </tr>
</table>

JavaScript

var id = 0;
var onclickHandler=function(event) {

    var content = $(this).html();
    id = $(this).parent().find('.id').val();
    var class = $(this).attr('class');

    $(this).html('<input type="text" id="editablefield" name="' + class + '" value="' + content + '"/>');

    $(this).unbind(event);
};
$('table.editable td').bind('click', onclickHandler);

$('#editablefield').live('blur', function() {
    var value = $(this).val();
    var name = $(this).attr('name');
    var tdElem=$(this).parent();
    $.ajax({
        type: "POST",
        url: "modules/Events/ajax/saveField.php",
        data: "id=" + id + "&val=" + value + "&type=" + name,
        success: function(data) {
            //var data = data;
            alert(data);
            $(tdElem).bind('click', onclickHandler);
        },
        error: function(request, status, error) {
            alert(request.responseText);
            $(tdElem).bind('click', onclickHandler);
        }
    });

    $(this).parent().html(value);
});