JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<button class="btn subplan" id='id1' data-bind="click: openPlanModal, css: {'btn-success': (percentComplete()==100 && statusOverride()=='' && SOCexpired()==false) || (statusOverride()=='pass' && SOCexpired()==false), 'btn-warning':percentComplete()<100 && percentComplete()>0 && statusOverride()=='' && SOCexpired()==false, 'btn-danger': statusOverride()=='fail' || SOCexpired()==true}">
  <span data-bind="text: name()">Navigationserklärung</span>
  <span style="display: block" data-bind="text: latestSOCDateDisplay()"></span>
</button>

JavaScript

function VM() {
  var self = this;

  self.percentComplete = ko.observable();
  self.statusOverride = ko.observable();
  self.SOCexpired = ko.observable();
  self.name = ko.observable('name');
  self.latestSOCDateDisplay = ko.observable('latestSOCDateDisplay');

  self.openPlanModal = function(data, event) {
    console.log(event.currentTarget.id);
  }
}

ko.applyBindings(new VM());