JSFiddle - React, Tailwind, and code Playground

HTML

@if (bool.Parse(ConfigurationManager.AppSettings["useLocation"])) {
<div id="id" class="left element mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  <input id="idInput" class="mdl-textfield__input" type="text" disabled="disabled" value="@Model.storageId" )>
  <label class="mdl-textfield__label" for="idInput">Kladde Id</label>
</div>
}

<select name="item.location" class="selectpicker">

  @foreach (var x in JournalConnector.GetAllLocations()) {
  <option id="line" value="@x">@x</option>

  }
</select>

<div id="scan" class="left element mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  <input id="scanInput" class="mdl-textfield__input" type="text" name="item.barCode">
  <label class="mdl-textfield__label" for="scanInput">Varenr / stregkode</label>
</div>
<div id="itemcounter" class="left element mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  <input id="itemCount" class="mdl-textfield__input" type="text" name="item.count">
  <label class="mdl-textfield__label" for="itemCount">Antal optalt</label>
</div>
<input id="okButton" class="center-block col-xs-6 mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent tinyBotSpace" name="Action" type="submit" value="@ScanItemModel.ContinueScanning">

<input id="cancelButton" class="center-block col-xs-5 pull-right mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent tinyBotSpace" name="Action" type="submit" value="@ScanItemModel.ScanAndStop">

JavaScript

function setFocusToTargetInput() {
      document.getElementById("TargetInput").focus();
    }

    function setFocusToScanInput() {
      document.getElementById("ScanInput").focus();
    }

    function valueCheck() {
      if ($('#TargetInput').val().length > 0) {
        $('#TargetInput').attr('disabled', true);
        setFocusToScanInput();
        $(document)
          .ready(function() {
            $('#okButton').attr('disabled', true);
            $('#cancelButton').attr('disabled', true);
            $('#ScanInput')
              .keyup(function() {
                if ($(this).val().length !== 0) {
                  $('#okButton').attr('disabled', false);
                  $('#cancelButton').attr('disabled', false);
                } else {
                  $('#okButton').attr('disabled', true);
                  $('#cancelButton').attr('disabled', true);
                }

              });
          });
      } else {
        setFocusToTargetInput();
        $(document)
          .ready(function() {
            $('#okButton').attr('disabled', true);
            $('#cancelButton').attr('disabled', true);
            $('#TargetInput')
              .keyup(function() {
                if ($(this).val().length !== 0) {
                  $('#okButton').attr('disabled', false);
                  $('#cancelButton').attr('disabled', false);
                } else {
                  $('#okButton').attr('disabled', true);
                  $('#cancelButton').attr('disabled', true);
                }
              });
          });
      }
    }

    valueCheck();