javascript - Edit table row on button click meteor.js -

i adding details form inside table getting issue while click edit button update selected row.

i want edit row such row becomes textbox while clicking edit button.

here template:

<template name="empform">     <div class="container">         <form>             <div class="row" style="margin-left:330px;">                 <div class="form-group col-sm-2">                     <label for="name">name:</label>                     <input type="text" class="form-control" name="empname" style="height:40px;">                 </div>                 <div class="form-group col-sm-2">                        <label for="email">email:</label>                     <input type="email" class="form-control" name="email" style="height:40px;">                 </div>                 <div class="form-group col-sm-2">                     <label for="address">address:</label>                     <textarea class="form-control" rows="3" name="address"></textarea>                 </div>             </div>             <div class="btn-style">                 <input type="submit" name="submit" value="submit" class="btn btn-success">                 <input type="reset" name="reset" value="reset" class="btn btn-primary">             </div><br>         </form>         <table class="table table-bordered table-hover">             <thead>                 <tr>                     <th>name</th>                     <th>email</th>                     <th>address</th>                     <th>action</th>                 </tr>             </thead>             <tbody>                 {{#each emp}}                 <tr>                     {{#if isdocumentid}}                     <td><input type="text" name="{{empname}}"></td>                     <td><input type="text" name="{{empemail}}"></td>                     <td><input type="text" name="{{empaddress}}"></td>                     <td>                         <a href="#" class="remove-emp btn btn-danger glyphicon glyphicon-trash"></a>                         <a href="#" class="edit-emp btn btn-success glyphicon glyphicon-edit"></a>                     </td>                     {{else}}                     <td>{{name}}</td>                     <td>{{empemail}}</td>                     <td>{{empaddress}}</td>                     <td>                         <a href="#" class="remove-emp btn btn-danger glyphicon glyphicon-trash"></a>                         <a href="#" class="edit-emp btn btn-success glyphicon glyphicon-edit"></a>                     </td>                     {{/if}}                 </tr>                 {{/each}}             </tbody>         </table>      </div> </template> 

and event handler:

'click .edit-emp': function()     {         event.preventdefault();         var documentid = this._id;         var empnamedetail = $('[name=empname]').val();         var empemail = $('[name=email]').val();         var empaddress = $('[name=address]').val();         var confirm = window.confirm("update item?");         if(confirm)         {             employees.update({_id: documentid}, {set: {name: empnamedetail, empemail, empaddress}});         }     } });