JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cpNewTemplateDetailsWrap">
  <div class="col-sm-3">
    <label>Course Id</label>
  </div>
  <div class="col-sm-9">
    <input id="courseIdInput" type="text" class="form-control input-lg" placeholder="e.g. CT001" />
  </div>
  <div class="col-sm-3">
    <label>Course Description</label>
  </div>
  <div class="col-sm-9">
    <input id="courseDescInput" type="text" class="form-control input-lg" placeholder="e.g. Cadet Training" />
  </div>
  <div class="col-sm-3">
    <label>Course Duration <small>(Days)</small>
    </label>
  </div>
  <div class="col-sm-9">
    <input id="courseDurationInput" type="number" min="0" class="form-control input-lg" placeholder="5" />
  </div>
  <div class="col-sm-3" id="courseDemandTitle">
    <label>Course Demand</label>
  </div>
  <div class="col-sm-9">
    <input id="courseDemandInput" type="number" min="0" class="form-control input-lg" placeholder="5" />
  </div>
</div>

JavaScript

var myInput = document.querySelectorAll("input[type=number]");

function keyAllowed(key) {
  var keys = [8, 9, 13, 16, 17, 18, 19, 20, 27, 46, 48, 49, 50,
    51, 52, 53, 54, 55, 56, 57, 91, 92, 93
  ];
  if (key && keys.indexOf(key) === -1)
    return false;
  else
    return true;
}

myInput.forEach(function(element) {
  element.addEventListener('keypress', function(e) {
    var key = !isNaN(e.charCode) ? e.charCode : e.keyCode;
    if (!keyAllowed(key))
      e.preventDefault();
  }, false);

  // Disable pasting of non-numbers
  element.addEventListener('paste', function(e) {
    var pasteData = e.clipboardData.getData('text/plain');
    if (pasteData.match(/[^0-9]/))
      e.preventDefault();
  }, false);
})