How to ensure an inequality graph updates its shading dynamically in JSXgraph?

Question

I am making a dynamic graph of an linear inequality. I want there to be two draggable points that dynamically change the inequality graph. I also want a button that toggles whether the line is dashed or solid, and another button that toggles the shading direction.

I'm essentially done, but I can't get the shading to switch sides when the button is pressed.

My current code can be found and run at https://jsfiddle.net/einstien311/kj7udbnh/11/ .

const board = JXG.JSXGraph.initBoard('jxgbox', {
  boundingbox: [-12, 12, 12, -12],
  axis: true,
  grid: true
});


// Initialize points for default graph
var firstBluePoint = board.create('point', [1, -4], {
  name: '',
  snapToGrid: true,
  color: 'blue',
  highlightStrokeColor: 'blue',
  highlightFillColor: 'blue'
});

var secondBluePoint = board.create('point', [2, -2], {
  name: '',
  snapToGrid: true,
  color: 'blue',
  highlightStrokeColor: 'blue',
  highlightFillColor: 'blue'
});


// Create Lines 
var blueLine = board.create('line', [() => -1 * ((secondBluePoint.Y() - firstBluePoint.Y()) / (secondBluePoint.X() - firstBluePoint.X()) * (-firstBluePoint.X()) + firstBluePoint.Y()), () => -1 * ((secondBluePoint.Y() - firstBluePoint.Y()) / (secondBluePoint.X() - firstBluePoint.X())), 1], {
  name: '',
  color: 'blue',
  highlightStrokeColor: 'blue',
  strokeWidth: 2.5,
  dash: 0,
  visible: true
});


// Create Inequalities Shaded Region
var blueInequality = board.create('inequality', [blueLine], {
  color: 'blue',
  fillOpacity: 0.18,
  strokeWidth: 0,
  inverse: true
})


// Blue Line Button
var toggleBlueLinePattern = board.create('button', [-11.5, -9.9, 'Change Blue Line', function() {
  if (blueLine.getAttribute('dash') == 0) {
    blueLine.setAttribute({
      dash: 3
    });
  } else {
    blueLine.setAttribute({
      dash: 0
    });;
  }
}]);


// Blue Shading Button
var toggleBlueShadeDirection = board.create('button', [-12, -11.1, 'Change Blue Shading', function() {
  if (blueInequality.getAttribute('inverse')) {
    blueInequality.setAttribute({
      inverse: false
    });
  } else {
    blueInequality.setAttribute({
      inverse: true
    });
  }
}]);


// Visualize whether the attribute truly changes
var blueInequalityInverseAttributeListener = board.create('point', [() => (blueInequality.getAttribute('inverse') ? 1 : 0), 0], {
  name: 'Blue Inequality Inverse Attribute Listener',
  color: 'green',
  highlightStrokeColor: 'green',
  highlightFillColor: 'green',
  visible: true
});

What I've tried so far to diagnose the issue:

I've made a point on the graph called "blueInequalityInverseAttributeListener" that dynamically shows the value of the inverse attribute of the inequality. When the button is pressed, the Listener Point toggle between 0 and 1, which (if I've done it correctly) indicates to me that the inequality's attribute truly does get updated as intended by the button.

Therefore, I can only conclude that although the attribute is updated, the change is not reflected on the graph. I'm not sure if there's some syntax I don't know or if there's some function I need to call to re-render the inequality. Any help would be greatly appreciated. :)

Einstien311

P.S. I'm only a few months into JSXgraph, and that is my only experience with JavaScript, so my syntax might not be very elegant :/