HTML table display JQuery checkbox off-by-one and not preserving data

I have some JavaScript code that should display a matrix of checkboxes. I want to list the column titles across the top, and then put rows where there is a column of checkboxes under each header, plus a left-hand column with row names under a blank header box. I'm going for the look on this page:

http://ift.tt/1RhgBuL

I wrote a Fiddle that almost works:

http://ift.tt/1Si4egO

The first problem is that my table displays the checkboxes on a separate line from the cell with the row name. I checked my HTML, and it seems correct, but I'm wondering if I'm missing a or a somewhere. I add the row name cell like this (see the Fiddle for complete code):

var chugNames = ["Ropes", "Cooking", "Outdoor Cooking"];
for (x = 0; x < chugNames.length; x++) {
    // Add a row for each name.                             
    target.append("<tr><td>" + chugNames[x] + "</td>");
    for (y = 0; y < chugNames.length; y++) { 
      target.append("<td><input type=\"checkbox\" />");
      checkbox = $('</input>', {
        'type': 'checkbox',
        'data-x': chugNames[x],
        'data-y': chugNames[y],
      });
      target.append(checkbox);
      target.append("</td>");
   }
   target.append("</tr>");
}

The other problem is that data-x and data-y return "undefined" when I access them later in my "on" method:

   target.on('change', 'input:checkbox', function() {
     var $this = $(this),
       x = $this.data('x'),
       y = $this.data('y'),
       checked = $this.prop('checked');
     alert('checkbox changed chug intersection (' + x + ', ' + y + '): ' + checked);
   });

When I check a box, I get "checkbox changed chug intersection (undefined, undefined): true". It should print something like (Ropes, Cooking), depending on which box was checked.

Any help would be greatly appreciated.