I have a cytoscape.js graph, I have 2 node types. I want to style the nodes based on the class.

I have this so far:

cy = cytoscape({ 
        container: document.getElementById("cy"),
        style: [
          {
             selector: 'node',
             style: {
               'background-color': 'green',
               'label': 'data(_label)',
               'shape': 'hexagon',
             }
          },
          {
            selector: '.server',
            style: {
              'background-color': 'red',
              'shape': 'square'
            }
          },
          {
            selector: '.db',
            style: {
              'background-color': 'blue',
              'shape': 'triangle'
            }
          },
          {
            selector: 'edge',
            style: {
              'width': 3,
              'line-color': '#fff',
              'target-arrow-color': '#fff',
              'target-arrow-shape': 'triangle',
              'curve-style': 'bezier',
              
            }
          }
        ],
        elements: {
          nodes: [
            { data: { id: 'a', _label: 'zzz', type: 'node'}, classes: 'db'},
            { data: { id: 'b', _label: 'b', type: 'node'}, classes: 'server'},
            { data: { id: 'c', _label: 'c', type: 'node'}, classes: 'server'},
            { data: { id: 'd', _label: 'd', type: 'node'}, classes: 'server'},
            { data: { id: 'e', _label: 'e', type: 'node'}, classes: 'server'},
            { data: { id: 'k', _label: 'k', type: 'node'}, classes: 'server'}],
          edges: [
            { data: { id: 'ab', source: 'a', target: 'b', type: 'edge'}},
            { data: { id: 'bc', source: 'b', target: 'c', type: 'edge'}},
            { data: { id: 'bd', source: 'b', target: 'd', type: 'edge'}},
            { data: { id: 'ae', source: 'a', target: 'e', type: 'edge'}},
            { data: { id: 'ek', source: 'e', target: 'k', type: 'edge'}}]
          }});

When the graph loads it all works fine. I see 2 blue triangles and the rest are red squares, as expected.

I have some code that shows a dialog when the user selects change type from a context menu, I've elided that code, but the handler looks like this:

var foo = cy.$("#"+selectedNode.id);
foo.removeClass(foo.classes()[0]);
foo.addClass(newType);      // wher newType here is either 'server' or 'db'

This works the first time I try to change something. i.e. I can change a server to a db, and it switches from a red square to a blue triangle, or vice versa. However it only works once. If I try to change a second time (either same node or different node), then I just get a green hexagon all the time.

Why does it only work once ?

I assume I'm somehow corrupting the graph, no errors are logged to the console.