<script>
       $(function() {
           
           //calculate
            $(".grid.form-element").change( function(){
    		    var cell = $(this).find(".hover"); 
                var row = $(cell).parents("tr");
        
                  if($(row).find("td")){
                    firstColumnValue = $(row).find("td:nth-child(2) span span").text(); // quantity
                    secondColumnValue = $(row).find("td:nth-child(3) span span").text(); //amount 
        
                    //perform computation
                    value = firstColumnValue * secondColumnValue; // total = amount x quantity
        
                    if(!isNaN(value)){
                        
                        //update hidden json definition
                        json = $(row).find("textarea").val();
                        obj = eval("["+json+"]")[0];
                        fieldId = $(row).find("td:nth-child(4)>span>span").attr("column_key"); // total

                        //handles if user changes value more than once 
                        if(fieldId == null){
                             fieldId = $(row).find("td:nth-child(4)>span"); 
                        }

                        if(fieldId){
                             obj[fieldId] = value;
                             newJson = JSON.stringify(obj);
                             $(row).find("textarea").val(newJson);
        
                             //update visible column value
                             $(row).find("td:nth-child(4)>span").text(value); // total
                          
                        }
                    }

                  }
            });
        });
</script>