JSGrid Editing with External form

HTML

<link rel="stylesheet" href="http://js-grid.com/css/jsgrid.min.css">
<link rel="stylesheet" href="http://js-grid.com/css/jsgrid-theme.min.css">
<script src="http://js-grid.com/js/jsgrid.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="jsgrid"></div>

<div>
    <h2>Details</h2>
    <p><label>Name: <input type="text" id="name"></input></label></p>
    <button type="button" id="save">Save</button>
</div>

CSS

.ui-widget {
    font-size: 12px;
}

JavaScript

var data = [
    { Name: "John" },
    { Name: "Jimmy" },
    { Name: "Tom" },
    { Name: "Frank" },
    { Name: "Peter" }
];

$("#jsgrid").jsGrid({
    autoload: true,
    width: 200,
    controller: {
        loadData: function() {
            return data;
        }
    },
    rowClick: function(e) {
        editingClient = e.item;
        $("#name").val(e.item.Name);
        console.log(e);
        console.log(editingClient);
    }, 
    fields: [
        { type: "text", name: "Name" }
    ]
});

var editingClient;

$("#save").on("click", function() {
    if(!editingClient)
        return;
    
    $.extend(editingClient, {
        Name: $("#name").val()
    });
    
    $("#jsgrid").jsGrid("updateItem", editingClient);
 
    editingClient = null;
    $("#name").val("");
});