JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fixed">
  <ul>
    <li class="list-item"> <input type="checkbox" name="cb" id="cb"> </li>
    <li class="list-item"> <label for='job'>Job#: </label><input type="number" name="jobNumber" id="job" min="1"></li>
  </ul>
</div>

JavaScript

var checkbox = document.getElementById('cb');
var job = document.getElementById('job');
// looks for value in job# input

function recInput(e) {
  // sets CB[0] to checked
  console.log('changed input value to '+this.value);
  console.log('checkbox: ' + (checkbox.checked?'checked':'not'));
  if (!checkbox.checked){
  //https://bugzilla.mozilla.org/show_bug.cgi?id=327020
  //checkbox.setAttribute('checked', 'checked');
  	checkbox.click();
  }
}
// looks for checkbox uncheck

function recCheck(e) {
console.log(this.checked);
console.log(job.value);
  if (this.checked) {
    if (job.value === "") {
      job.value = "1";
    }
    // console.log("Checkbox is checked..");
  } else {
    //console.log("Clear J[0] input value here");
    job.value = '';
  }
}
job.addEventListener('change', recInput);
checkbox.addEventListener('click', recCheck);