title: Multiple Slickgrid on the same page
body: <p>I am creating multiple grids on a page dynamically based on the data returned from server side. Pushing all of the created grids to an arrayOfGrids. However, I am facing issue when I have to add data to a new cell of a new row. Its gets added to last grid.
  How can I get this done?
  My code is something like this below:-</p>
  
  <pre><code>    var index = 0;
  for ( var k = 0; k &lt; steps.length; k++) {
  var gridId = "#dataGrid_" + index++;
  var grid;
  var columns = new Array();
  for ( var jj = 0; jj &lt; rows[0].cells.length; jj++) {
      var key = {
          id : rows[0].cells[jj],
          name : rows[0].cells[jj],
          field : rows[0].cells[jj],
          //toolTip : 'Click to sort',
          //width : 200,
          sortable : true,
          editor : Slick.Editors.LongText
      };
      columns[jj] = key;
  }
  var data = [];
  for ( var i = 1; i &lt; rows.length; i++) {
      var tempData = (data[i - 1] = {});
      var title = null;
      var val = null;
      for ( var q = 0; q &lt; rows[i].cells.length; q++) {
          title = rows[0].cells[q];
          val = rows[i].cells[q];
          tempData[title] = val;
      }
  }
  
  var options = {
      enableCellNavigation : true,
      editable: true,
      asyncEditorLoading: false,
      enableColumnReorder: true,
      enableAddRow: true,
      autoHeight: true,
      leaveSpaceForNewRows:false,
      explicitInitialization: true
  };
  var myGrid = $("&lt;div id='"+gridId+"' style='width:400px;'&gt;&lt;/div&gt;");
  grid = new Slick.Grid(myGrid, data, columns, options);
  myGrid.appendTo($("#tableData"));
  grid.init();
  grid.onAddNewRow.subscribe(function(e,args){
      // Always adds to last grid ?
  
  });
  arrayOfGrids.push(grid);
  }
  </code></pre>