JSFiddle - React, Tailwind, and code Playground

by itamer

HTML

<form id='frmFixed'>
  <div class="fixed">
    <ul>
      <li class="list-item"> <input type="checkbox" name="cb[1]" id="cb1" data-idx=1> </li>
      <li class="list-item"> <label for='job1'>Job#: </label><input type="number" name="jobNumber[1]" id="job1" min="1" data-idx=1></li>
      <li class="list-item"> <input type="checkbox" name="cb[2]" id="cb2" data-idx=2> </li>
      <li class="list-item"> <label for='job2'>Job#: </label><input type="number" name="jobNumber[2]" id="job2" min="1" data-idx=2></li>
      <li class="list-item"> <input type="checkbox" name="cb[3]" id="cb3" data-idx=3> </li>
      <li class="list-item"> <label for='job3'>Job#: </label><input type="number" name="jobNumber[3]" id="job3" min="1" data-idx=3></li>
    </ul>
  </div>
</form>

JavaScript

// looks for value in job# input

var frmFixed = document.getElementById('frmFixed');

function recInput(e) {
  console.log('input idx: ' + this.dataset.idx);
  
  var checkbox = document.getElementById('cb'+ this.dataset.idx);
  
  if (!checkbox.checked) {
    checkbox.click();
  }
}
// looks for checkbox uncheck

function recCheck(e) {
  
  console.log('checkbox idx: ' + this.dataset.idx);
  var job = document.getElementById('job' + this.dataset.idx);
  
  if (this.checked) {
    if (job.value === "") {
      job.value = "1";
    }
  } else {
    job.value = '';
  }
}

frmFixed.querySelectorAll('input[type=checkbox]').forEach(item => {
  item.addEventListener('click', recCheck);
});
frmFixed.querySelectorAll('input[type=number]').forEach(item => {
  item.addEventListener('change', recInput);
});